2

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.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Haronious
  • 121
  • 10
  • Can you post the contents of your `app/javascript/hello_angular/app/app.component.scss`, since the error seems to originate from there? – smallbutton May 29 '18 at 06:55
  • `Invalid CSS after "": expected 1 selector or at-rule, was "var result = requir"` seems to stem from webpack. Have the same error (including 'var result = requir') with bootstrap.scss in a vue app –  May 30 '18 at 10:39

2 Answers2

2

Looks like some javascript in your scss file.

var result = requir

doesn't look like scss file. Review your file and if you still have problems, add comments to this answer.

Przemek Mroczek
  • 357
  • 1
  • 11
2

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.

  • This was indeed the answer. sass-loader is getting included somewhere by default but I wasn't able to specifically locate where. I got around the issue by overriding it in my environment.js file. I just wish the errors were a little less cryptic. Just happy I can move on now! `environment.loaders.insert('sass', { test: /\.scss$/, use: [ "to-string-loader", // creates style nodes from JS strings "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS ] });` – Haronious Jun 01 '18 at 19:59