我无法使用 webpack 将 scss 编译为单个 css 文件

Question

这是我的 webpack.config.js:

在我运行npm运行watch

之后

 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = {
      mode: 'production',
      entry: './catalog/view/theme/default/sas/common.scss',
      plugins: [
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: "./catalog/view/theme/default/stylesheet/stylesheet.css",


        })
      ],
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: "css-loader",
                options: {
                  modules: true,
                  sourceMap: true,
                  importLoader: 2
                }
              },
              'postcss-loader',
              "sass-loader"
            ],
          }
        ]
      }
      ,
      watch: true,
    }

我已经阅读了很多示例，但仍然感到困惑 - none 不 work.Google 只是给你一堆有用的信息。

Answer 1

问题已在配置中添加解决：

 output: {
path: path.resolve(__dirname, "catalog/view/theme/default/css"),

},

我没注意到带有 css 的文件已保存到 './src/.../catalog/view/theme/default/sas/common.scss' 文件夹中，所以 "output.path" - 是强制性的属性.

我无法使用 webpack 将 scss 编译为单个 css 文件

I can't get compiled scss to single css-file using webpack

webpack

webpack-2

webpack-style-loader