铁人12前哨站 - webpack 与 sass 的结合

今天，我们要先将 scss 导入专案中，scss 是 css 的预处理器，可以使我们将样式做许多管理，首先，我们需要将 scss 下载下来，输入指令

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

虽然我们使用的是 scss ，但它下挂在 sass 中，因此我们只需要下载 sass 即可；除此之外，我们还需要将编译好的 scss 转译成 css 并且额外产档出来，我们在这边额外下载一个 plugin miniCssExtractPlugin，需要额外产生 css 档不包在 js 档中是为了减少读取时间

npm install mini-css-extract-plugin --save-dev

下载完后，我们进入 webpack.config.js 去进行配置

const miniCssExtractPlugin  = require('mini-css-extract-plugin');module: {        rules: [            {            test: /\.s[ac]ss$/i, //读取档名含有 .sass 和 .scss 的档案            use: [                    miniCssExtractPlugin.loader,                      'css-loader',                    'sass-loader'                 ]            }        ]},    plugins: [    new miniCssExtractPlugin({        filename: 'css/style.[hash].css' //产出档案名称和位置    })]

好的，最后我们只需要在 src/index.js 中引用我们的 scss 档案，并且进行编译后即可看到我们的 scss 被汇出成 css 档啰