时间戳

首页 > 解决方案 > 如何在 Rails 5.2 / Angular 5 / Webpacker 中为组件包含单独的 SCSS 文件？

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

问题描述

我一直在遵循一些基本指南，以使 Angular 5 与 Rails 5 和 Webpacker 一起运行，但显然最近发生了一些变化，这给事情带来了麻烦。例如，我正在按照本指南从头开始设置项目。

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

一切都很好，直到您到达标有“使用不同的文件样式”的部分

当我重新启动 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

我已经为此工作了一段时间，但找不到任何有关如何使用最新更改进行设置的更新文档。任何能指出我正确方向的东西都将不胜感激。

标签： webpackruby-on-rails-5angular5webpack-dev-serveryarnpkg

解决方案

看起来像您的 scss 文件中的一些 javascript。

var result = requir

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

推荐阅读