如何在 Rails 5.2 / Angular 5 / Webpacker 中为组件包含单独的 SCSS 文件?
How do I include a separate SCSS file for a component in Rails 5.2 / Angular 5 / Webpacker?
我一直在遵循一些获取 Angular 5 运行 Rails 5 和 Webpacker 的基本指南,但显然最近发生了一些变化,这给事情带来了麻烦。例如,我按照本指南从头开始设置项目。
https://github.com/amitai10/rails-angular-webpacker
一切正常,直到您到达标有 "Using a different file for style"
的部分
当我重新启动我的 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
我已经为此工作了一段时间,但找不到任何关于如何使用最新更改进行设置的更新文档。任何能为我指明正确方向的东西都将不胜感激。
在你的 scss 文件中看起来像一些 javascript。
var result = requir
看起来不像 scss 文件。查看您的文件,如果您仍然有问题,请在此答案中添加评论。
您可能已经配置了另一个 scss 预处理器,所以 webpack 会感到困惑。寻找这样的东西
{
test: /\.scss$/,
use: [
'css-loader',
'sass-loader'
]
}
in your webpack.base.config.js and comment it out.
我一直在遵循一些获取 Angular 5 运行 Rails 5 和 Webpacker 的基本指南,但显然最近发生了一些变化,这给事情带来了麻烦。例如,我按照本指南从头开始设置项目。
https://github.com/amitai10/rails-angular-webpacker
一切正常,直到您到达标有 "Using a different file for style"
的部分当我重新启动我的 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
我已经为此工作了一段时间,但找不到任何关于如何使用最新更改进行设置的更新文档。任何能为我指明正确方向的东西都将不胜感激。
在你的 scss 文件中看起来像一些 javascript。
var result = requir
看起来不像 scss 文件。查看您的文件,如果您仍然有问题,请在此答案中添加评论。
您可能已经配置了另一个 scss 预处理器,所以 webpack 会感到困惑。寻找这样的东西
{ test: /\.scss$/, use: [ 'css-loader', 'sass-loader' ] }
in your webpack.base.config.js and comment it out.