Как включить отдельный файл SCSS для компонента в Rails 5.2 / Angular 5 / Webpacker? - PullRequest
Новая
       16

Как включить отдельный файл SCSS для компонента в Rails 5.2 / Angular 5 / Webpacker?

0 голосов
/ 16 мая 2018

Я следовал некоторым основным инструкциям по запуску Angular 5 с Rails 5 и Webpacker, но, очевидно, произошли некоторые недавние изменения, которые привели к краху.Например, я следую этому руководству, чтобы создать проект с нуля.

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

Все прекрасно работает, пока вы не перейдете к разделу с пометкой «Использование другого файла для стиля»"

Когда я перезагружаю свой webpack-dev-сервер, компиляция завершается с ошибкой: 

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

Я уже некоторое время работаю над этим и не могу найти какой-либообновленная документация о том, как настроить это с последними изменениями.Все, что укажет мне правильное направление, будет с благодарностью.

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Возможно, у вас уже настроен другой препроцессор scss, поэтому веб-пакет запутался. Ищите что-то вроде этого 

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

в вашем webpack.base.config.js и закомментируйте его.

0 голосов
/ 29 мая 2018

Похоже на JavaScript в вашем файле scss. 

var result = requir

не похоже на файл scss.Просмотрите свой файл и, если у вас все еще есть проблемы, добавьте комментарии к этому ответу.

...