webpack--打包scss

Posted 2022-02-13 lvshoutao

1.npm install sass-loader node-sass --save-dev

2.scss通俗理解相当于sass升级版，所以依赖的插件还是sass-loader node-sass

  

sass写法，换行缩进

#sidebar
  width: 30%
  background-color: #faa

scss写法，中括号，分号

#sidebar 
  width: 30%;
  background-color: #faa;

scss写法与css写法更相近（先这么理解吧）

3.配置文件

module: 
        rules:[
            
                //转换es6语法
                test:/(\.jsx|\.js)$/,
                use:
                    loader:"babel-loader",
                    options:
                        presets:[
                            "env"
                        ]
                    
                ,
                exclude:/node_modules/ //排除转换目录
            ,
                test:/\.css$/,
                /*
                use:[
                    loader:‘style-loader/url‘ //使用style-loader进行处理，位置必须在css-loader前面
                ,
                    loader:‘css-loader‘ //使用css-loader进行处理
                ]
                //use:[‘style-loader‘,‘css-loader‘] // 此处也可以这样写
                */
               use:ExtractTextWebpackPlugin.extract(
                    fallback: // 这里表示不提取的时候，使用什么样的配置来处理css
                        loader: ‘style-loader‘,
                        options: 
                            singleton: true // 表示将页面上的所有css都放到一个style标签内
                        
                    ,
                    use: [ // 提取的时候，继续用下面的方式处理
                        
                            loader: ‘css-loader‘,
                        
                    ]
               )
            ,
                test: /\.scss$/, 
                use: ExtractTextWebpackPlugin.extract(
                    use:[‘css-loader‘,‘sass-loader‘]
                )
            
        ],
        
    ,