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

常用的样式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