2.webpack打包样式(css、less、scss)资源

常用的样式loader

• style-loader : 将css样式加载到页面的标签里面
• css-loader: 解析( @import 和 url() ，会 import/require() 后再解析(resolve)它们。
• less-loader: 解析less语法
• postcss-loader: 添加css前缀，需要在项目根目录下新建postcss.config.js文件，进行相关配置。

(一) 处理css文件

1. 在src文件夹中创建index.js文件，base.css文件，并在index.js文件中引入base.css文件

   index.js文件内容：

   import './base.css';
   

   base.css文件内容：

   html,body{background-color: pink;
   }
   

2. 安装 style-loader和css-loader

   npm i style-loader -D
   

   npm i css-loader -D
   

3. 在webpack的配置文件webpack.config.js的做loader配置中做如下处理

   //loader的配置
   module:{rules:[//详细loader配置 {test:'/\.css$/',use:[//创建style标签，并将js中的样式资源插入到style标签中，然后添加到页面的head中生效'style-loader',//将css文件变成commonjs模块加载js中，里面内容是样式字符串'css-loader']}                                                                                                                         ]
   },
   

4. 进行打包

   webpack
   

5. 在文件输出的文件夹(build)下可以得到输出文件(built.js)，并在当前文件夹中新建一个index.html文件，将built.js引入进来，打开index.html文件，可以看到页面为粉色。

6. 在打开的index.html文件中的head中有自己写的css样式。

(二) 处理less文件

1. 在入口文件(src\index.js)所在的目录下创建common.less文件

   html{body{background-color: red;}
   }
   

2. 在入口文件index.js中引入common.less文件

   import './common.js';
   

3. 安装 css-loader,style-loader,less-loader，对less文件进行处理

   npm i style-loader -D
   

   npm i css-loader -D
   

   npm i less-loader -D
   

4. 在webpack配置文件webpack.config.js进行配置
   css和less有很多loader相同，但是不能混合使用，要分开

   //处理less的loader
   {test: /\.less$/,use:[//创建style标签，并将js中的样式资源插入到style标签中，然后添加到页面的head中生效'style-loader',//将css文件变成commonjs模块加载js中，里面内容是样式字符串'css-loader',//处理less文件'less-loader']
   }
   

5. 进行打包

   webpack