通过 webpacker 编译 js 导致：SassError: expected "{"

Question

我正在尝试scss在我的 rails 应用程序中使用，由webpacker. 每当我运行时rails webpacker:compile，都会出现以下错误：

ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ?
1 ? import api from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  ?                                                                                               ^
  ?
  app/javascript/stylesheets/application.scss 1:95  root stylesheet

我在调试这个问题时遇到了麻烦，希望得到任何帮助。

---

依赖关系

rails: 6.1
webpacker: 6.0.0.pre1
@webpack-cli/serve
webpack: 5.11
webpack-cli: 4.2
webpack-dev-server: 3.11 

---

package.json

ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ?
1 ? import api from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  ?                                                                                               ^
  ?
  app/javascript/stylesheets/application.scss 1:95  root stylesheet

---

config/webpack/base.js：

const { webpackConfig, merge } = require('@rails/webpacker')

const customConfig = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules/,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
}

module.exports = merge(webpackConfig, customConfig)

---

app/javascript/packs/application.js

rails: 6.1
webpacker: 6.0.0.pre1
@webpack-cli/serve
webpack: 5.11
webpack-cli: 4.2
webpack-dev-server: 3.11 

Answer 1

删除您为 SASS/SCSS 添加的自定义配置规则。当 Webpacker 6 检测到您安装了 css-loader、postcss-loader、mini-css-extract-plugin 等时，它会为您提供适当的 CSS 规则。