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

【问题标题】：Compiling js via webpacker results in: SassError: expected "{"通过 webpacker 编译 js 会导致：SassError: expected "{"
【发布时间】：2021-02-15 22:10:40
【问题描述】：

我正在尝试在我的 rails 应用程序中使用scss，由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

{
  "name": "ostor",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.6.0",
    "@rails/actioncable": "^6.1.2-1",
    "@rails/activestorage": "^6.1.2-1",
    "@rails/ujs": "^6.1.2-1",
    "@rails/webpacker": "^6.0.0-beta.5",
    "autoprefixer": "^10.2.4",
    "bootstrap": "^v5.0.0-beta2",
    "css-loader": "^5.0.2",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "d3": "^6.2.0",
    "jquery": "^3.5.1",
    "mini-css-extract-plugin": "^1.3.7",
    "postcss": "^8.2.6",
    "postcss-loader": "^5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "turbolinks": "^5.2.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.3.0",
    "webpack-dev-server": "^3.11.2"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

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

import ActiveStorage from "@rails/activestorage";
import * as RailsUjs from "@rails/ujs";
import Turbolinks from "turbolinks";

ActiveStorage.start();
RailsUjs.start();
Turbolinks.start();

import "channels";
import "bootstrap";

import "../stylesheets/application.scss";

【问题讨论】：

我认为您不能在样式表中使用 JavaScript 导入。
你能更新到最新的 Webpacker beta 版本吗？只要您遵循 README 说明，Webpacker 配置应该为您启用 CSS 处理，而无需修改配置：github.com/rails/webpacker#css
这就是我要说的。您可能需要解决默认的 Webpacker 6 配置，它将 CSS 提取到单独的文件中。但我不明白你为什么要在 CSS 文件中导入 webpack 加载器 JavaScript。这似乎是对 webpack 的误用。
感谢您的链接。我误解了你的错误。不确定这是否是维护人员的错误或预期行为，但如果保持这种状态，升级会变得混乱。
作为一种解决方法，我认为应该删除样式表导入并将 applicaton.scss 移动到与 application.js 相同的目录，即，因为它们具有相同的名称，Webpacker 将识别这些双入口点。

标签： ruby-on-rails webpack webpacker

【解决方案1】：

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

【讨论】：