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'] }) } ], },