3.2 如何接入SCSS

3.2 如何接入SCSS

问题一：SCSS的优点？

方便地管理代码，抽离公共的部分，通过逻辑写出更灵活的代码

问题二：如何接入SCSS？

最适合的方式是使用 Loader，Webpack 官方提供了对应的sass-loader。

Webpack 接入 sass-loader 相关配置如下：

module.exports={module:{rules:[{// 增加对 SCSS 文件的支持test:/\.scss$/,// SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loaderuse:['style-loader','css-loader','sass-loader'],},]},};

问题三：webpack处理SCSS流程？

通过 sass-loader 把 SCSS 源码转换为 CSS 代码，再把 CSS 代码交给 css-loader 去处理。

css-loader 会找出 CSS 代码中的@import和url()这样的导入语句，告诉 Webpack 依赖这些资源。同时还支持 CSS Modules、压缩 CSS 等功能。处理完后再把结果交给 style-loader 去处理。

style-loader 会把 CSS 代码转换成字符串后，注入到 JavaScript 代码中去，通过 JavaScript 去给 DOM 增加样式。如果你想把 CSS 代码提取到一个单独的文件而不是和 JavaScript 混在一起，可以使用ExtractTextPlugin。