Compiling js via webpacker results in: SassError: expected "{"

Question

I'm trying to use scss in my rails application, configured by webpacker. Whenever I run rails webpacker:compile, I get the following error:

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

I'm having trouble debugging this problem and would appreciate any help.

Dependencies

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";

I don't think you can use a JavaScript import in a stylesheet. — rossta, Feb 15 '21 at 23:39
Could you update to the latest Webpacker beta version? The Webpacker config should enable CSS processing for you without you having to modify to config as long as you follow the README instructions: https://github.com/rails/webpacker#css — rossta, Feb 15 '21 at 23:44
That’s what I’m saying. You may need to work around the default Webpacker 6 config which will extract CSS into a separate file. But I don’t understand why you would want to import webpack loader JavaScript in a CSS file. It seems like a misapplication of webpack. — rossta, Feb 16 '21 at 13:53
@rossta You may be right. I'm looking into this. Seems I'm not the only one having this problem: https://github.com/rails/webpacker/issues/2916 — Kurt Mueller, Feb 16 '21 at 14:36
Thanks for the link. I misinterpreted your error. Not sure if this is a bug or intended behavior on the maintainers part, but it will make upgrading confusing if it stays this way. — rossta, Feb 16 '21 at 15:06
As a workaround, I think it should work to remove the stylesheet import and move applicaton.scss to the same directory as application.js, i.e., because they have the same name, Webpacker will recognize these a dual entrypoint. — rossta, Feb 16 '21 at 15:09
@rossta Yea, I went with your suggestion. It also helps to read the upgrade guide and to blitz any previous configuration. — Kurt Mueller, Feb 16 '21 at 18:47

score 12 · Accepted Answer · answered Feb 18 '21 at 01:15

12

Remove the custom config rules you added for SASS/SCSS. Webpacker 6 will provide the appropriate CSS rules for you when it detects you've installed css-loader, postcss-loader, mini-css-extract-plugin, etc.

answered Feb 18 '21 at 01:15

rossta

11,394
1
43
47

score 1 · Answer 2 · answered Dec 02 '22 at 15:47

For the shakapacker users:

You don't need to add the option:

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

in the "rules" section. You just need to add:

yarn add sass sass-loader

and:

  extensions:
    - .sass
    - .scss

in your webpacker.yml file, and shakapacker will transpile sass/scss files.

score 0 · Answer 3 · edited Apr 21 '23 at 21:44

0

I had the same problem, In my case, I created a style.scss file with windows power shell. And it's creating the file under the wrong encoding (UTF-16). After much searching, I see in my wonderful PhpStorm on the bottom that I have this wrong encoding. It only took one click to change the encoding. In UTF-8, everything works! holy shi...

edited Apr 21 '23 at 21:44

Michael Roswell

1,300
12
31

answered Apr 07 '23 at 07:54

Roger Gerecke

41
1
6

Compiling js via webpacker results in: SassError: expected "{"

3 Answers3