CODEWITHSUNDEEP
ruby-on-railswebpackwebpacker
Kurt Mueller
Kurt Mueller

Reputation: 3224

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

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

Upvotes: 11

Views: 12423

Answers (4)

Kofthefens
Kofthefens

Reputation: 259

For shakapacker v7, you need to remove the rule added by default at index 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]
    }
  ]
}

This was the source of the problem, and by deleting it with:

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

the error can be solved.

Upvotes: 0

Roger Gerecke
Roger Gerecke

Reputation: 41

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...

Upvotes: 0

aarkerio
aarkerio

Reputation: 2364

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.

Upvotes: 2

rossta
rossta

Reputation: 11504

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.

Upvotes: 14

Related Questions