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

Question

我正在尝试在我的 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";

Answer 1

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

Answer 2

对于 shakapacker 用户：

您不需要添加选项：

 test: /\.s[ac]ss$/i

在“规则”部分。您只需添加：

yarn add sass sass-loader

和：

  extensions:
    - .sass
    - .scss

在你的 webpacker.yml 文件中，shakapacker 将转译 sass/scss 文件。

Answer 3

我遇到了同样的问题，就我而言，我使用 Windows Power shell 创建了一个

style.scss

文件。它正在以错误的编码创建文件（

UTF-16

）。经过多次搜索，我在底部精彩的

PhpStorm

中看到我的编码错误。只需单击一下即可更改编码。在

UTF-8

中，一切正常！圣石...

Answer 4

对于shakapacker v7，您需要删除索引3处默认添加的规则：

{
  test: /\.(scss|sass)(\.erb)?$/i,
  use: [
    '/Users/me/Programming/project/node_modules/mini-css-extract-plugin/dist/loader.js',
    {
      loader: '/Users/me/Programming/project/node_modules/css-loader/dist/cjs.js',
      options: [Object]
    },
    {
      loader: '/Users/me/Programming/project/node_modules/sass-loader/dist/cjs.js',
      options: [Object]
    }
  ]
}

这是问题的根源，通过删除它：

webpackConfig.module.rules.splice(3, 1);

错误可以解决。