How do I include a separate SCSS file for a component in Rails 5.2 / Angular 5 / Webpacker?

Question

I've been following some basic guides for getting Angular 5 running with Rails 5 and Webpacker but apparently there have been some recent changes that have thrown a wrench in things. For example, I'm following this guide to get a project set up from scratch.

https://github.com/amitai10/rails-angular-webpacker

Everything works great until you get to the section labelled "Using a different file for style"

When I restart my webpack-dev-server, the compilation fails with the error:

ERROR in ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./node_modules/to-string-loader/src/to-string.js!./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./app/javascript/hello_angular/app/app.component.scss
Module build failed: 

^
      Invalid CSS after "": expected 1 selector or at-rule, was "var result = requir"
      in /home/user/Desktop/parts-app/app/javascript/hello_angular/app/app.component.scss (line 1, column 1)
Error: 

^
      Invalid CSS after "": expected 1 selector or at-rule, was "var result = requir"
      in /home/user/Desktop/parts-app/app/javascript/hello_angular/app/app.component.scss (line 1, column 1)
    at options.error (/home/user/Desktop/parts-app/node_modules/node-sass/lib/index.js:291:26)
 @ ./app/javascript/hello_angular/app/app.component.scss 2:14-434
 @ ./app/javascript/hello_angular/app/app.component.ts
 @ ./app/javascript/hello_angular/app/app.module.ts
 @ ./app/javascript/hello_angular/index.ts
 @ ./app/javascript/packs/hello_angular.js
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_angular.js

I've been working on this for a while now and can't find any updated documentation on how to get this set up with the latest changes. Anything to point me in the right direction would be greatly appreciated.

Answer 1

You have probably another scss preprocessor already configured, so webpack gets confused. Look for something like this

  {
    test: /\.scss$/,
    use: [
      'css-loader',
      'sass-loader'
    ]
  }

in your webpack.base.config.js and comment it out.