如何使用 webpack 4 将 sass 编译为 css？

【问题标题】：How can you compile sass to css with webpack 4?如何使用 webpack 4 将 sass 编译为 css？
【发布时间】：2020-05-24 11:39:09
【问题描述】：

无法弄清楚如何使用 webpack4 将 main.scss 文件编译为 styles.css。所有的 javascript 和 scss 都被编译成一个 app.js 文件

  My package.json file:

webpack.config.js file:

 I want to compile my main file /src/styles/styles.scss to dist/styles.css

【问题讨论】：

【解决方案1】：

您可以尝试重新定义 .scss 规则的 use 属性。

{
test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ]
},

然后将其添加到您的插件中：

plugins: [
    ...,
    new MiniCssExtractPlugin({filename: '[name].css',})
]

这应该将它全部编译到 dist/ 文件夹中，作为一个单独的 .scss 文件。编辑：作为单独的 .css 文件。*

【讨论】：