webpack4+学习笔记：6. 安装加载器导入CSS样式

安装加载器导入CSS样式

加载器
style-loader css-loader
less less-loader
stylus stylus-loader
node-sass sass-loader
1. 安装
这里我就只安装部分加载器，可以根据自己项目的需求自行安装

//终端运行安装
npm install style-loader css-loader less less-loader -D

查看 package.json 文件
webpack4+学习笔记：6. 安装加载器导入CSS样式
2. 在项目中添加 css 文件和 less 文件

（1）index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <!-- 这里是之前讲的在webpack.config.js中配置生成html文件的title -->
    <title><%=htmlWebpackPlugin.options.title%></title>
    
</head>
<body>
    <div id="app">Wellcome</div>
</body>
</html>

（2）css.css

#app {
    font-size: 50px;
    color    : #FFFFFF;
    text-align: center;
}

（3）less.less

html{
    width: 100%;
    height: 100%;
    body{
        width: 100%;
        height: 100%;
        background-color: orange;
    }
}

3. 入口页面 index.js 中导入 css 和 less

import "./css/css.css";
import "./css/less.less";

4. webpack.config.js 配置
在module模块中进行配置：

module: {
   rules: [
        {
            test: /\.css$/,
            use : [
                { loader: "style-loader" },
                { loader: "css-loader" }
            ]
        },
        {
            test: /\.less$/,
            use : [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "less-loader" }
            ]
        }
    ]
},

5. 终端执行运行命令

npm run dev

6. 效果图如下
webpack4+学习笔记：6. 安装加载器导入CSS样式
注意：这里一步都不能少，不然运行的时候肯定报错！

7. 解析出来的样式我们可以看到是以style标签形式引入的

webpack4+学习笔记：6. 安装加载器导入CSS样式

下一篇我们使用 extract-text-webpack-plugin 插件把样式表以 link 形式引入~~~

webpack4+学习笔记：6. 安装加载器导入CSS样式

安装加载器导入CSS样式

相关推荐