Question

我一直在关注使用Rails 5和Webpacker运行Angular 5的一些基本指南，但显然最近有一些变化让事情变得棘手。例如，我按照本指南从头开始设置项目。

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

一切都很有效，直到你进入标有＆＃34的部分;为样式使用不同的文件＆＃34;

当我重新启动webpack-dev-server时，编译失败并显示错误：

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

我已经在这方面工作了一段时间，并且无法找到有关如何使用最新更改进行此设置的任何更新文档。任何指向我正确方向的事都将非常感激。

Answer 1

在你的scss文件中看起来像是一些javascript。

var result = requir

看起来不像scss文件。检查您的文件，如果仍有问题，请在此答案中添加注释。

Answer 2

您可能已经配置了另一个scss预处理器，因此webpack会感到困惑。寻找像这样的东西

  {
    test: /\.scss$/,
    use: [
      'css-loader',
      'sass-loader'
    ]
  }
在你的webpack.base.config.js中并将其注释掉。

如何在Rails 5.2 / Angular 5 / Webpacker中为组件包含单独的SCSS文件？

2 个答案: