如何在Rails 5.2/Angular 5/Webpacker中为组件包含单独的SCSS文件?
我一直在遵循一些基本的指南,让Angular 5与Rails 5和Webpacker一起运行,但显然最近有一些变化,使事情发生了变化。例如,我遵循本指南从头开始设置项目 在您进入“使用不同的文件进行样式”部分之前,一切都很顺利 重新启动webpack dev服务器时,编译失败,错误如下:如何在Rails 5.2/Angular 5/Webpacker中为组件包含单独的SCSS文件?,webpack,ruby-on-rails-5,angular5,webpack-dev-server,yarnpkg,Webpack,Ruby On Rails 5,Angular5,Webpack Dev Server,Yarnpkg,我一直在遵循一些基本的指南,让Angular 5与Rails 5和Webpacker一起运行,但显然最近有一些变化,使事情发生了变化。例如,我遵循本指南从头开始设置项目 在您进入“使用不同的文件进行样式”部分之前,一切都很顺利 重新启动webpack dev服务器时,编译失败,错误如下: ERROR in ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/
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会感到困惑。找像这样的东西 在您的webpack.base.config.js中,将其注释掉
你能发布你的
app/javascript/hello\u angular/app/app.component.scss
的内容吗,因为错误似乎是从那里产生的?在“”之后无效的CSS:expected 1选择器或at规则是“var result=requirer”
似乎源于网页。在vue应用程序中,bootstrap.scss出现相同的错误(包括'var result=requir')。这确实是答案。默认情况下,sass加载程序包含在某个地方,但我无法具体定位在何处。我通过在environment.js文件中覆盖它来解决这个问题。我只是希望错误不要那么神秘。很高兴我现在可以继续前进了environment.loaders.insert('sass',{test://\.scss$/,use:[“to string loader”,//从JS字符串“css loader”创建样式节点,//将css转换为CommonJS“sass loader”//将sass编译为css]})代码>
{
test: /\.scss$/,
use: [
'css-loader',
'sass-loader'
]
}