Compiling js via webpacker results in: SassError: expected "{" - ruby-on-rails

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

Answer 1

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.

Answer 2

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.