【webpack】webpack里css预处理器配置

作用

• 预处理器都是需要先把文件转成css再通过css-loader和style-loader转成页面样式。

使用

• scss 需要2个预处理器，node-sass和sass-loader
• less 要less和less-loader
• stylus 要stylus和stylus-loader
• loader是用来调用对应的解析器比如node-sass来解析文件的。
• 以scss为例：
• 首先src下建个myscss.scss和index.js文件，然后index.js文件中导入myscss.scss，给scss文件里写个样式。
• 安装： npm i node-sass sass-loader -D
• 配置：

  module:{
        rules:[
           { 
            test:/\.css$/,
            use:['style-loader','css-loader']
           }, 
           { 
            test:/\.scss$/,
            use:['style-loader','css-loader','sass-loader']
           }
        ]

• 进行测试样式是否会有。
• 注意这里会有点问题：如果一个css文件去引入scss文件，那么文件将解析不出来。比如css文件中@import'./mystyle.scss'
• 这样我们需要把css-loader中重新设置，变成一个对象，键名为loader和options。

    module:{
            rules:[
               { 
                test:/\.css$/,
                use:['style-loader',{loader:'css-loader',options:{importLoaders:1}},'sass-loader']
               }, 
               { 
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
               }
            ]
        },

• 这个importLoaders代表如果css文件引入别的文件，那么就先用下面的loader处理，1就代表后面跟的那个sass-loader,2的话就可以再配别的，都是从右往左执行。
• 最后测试效果即可成功。