webpack--打包scss

概述1.npm install sass-loader node-sass --save-dev 2.scss通俗理解相当于sass升级版，所以依赖的插件还是sass-loader node-sass    sass写法，换行缩进#sidebar width: 30% background-color: #faascss写法，中括号，分号#sidebar {

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

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

  

sass写法，换行缩进#sIDebar  wIDth: 30%  background-color: #faasCSS写法，中括号，分号#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‘]                })            }        ],},

总结

以上是内存溢出为你收集整理的webpack--打包scss全部内容，希望文章能够帮你解决webpack--打包scss所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。