如何在Rails 5.2/Angular 5/Webpacker中为组件引入独立SCSS文件？

这个错误明显是样式文件被重复编译引发的loader冲突——你的SCSS文件先被转成了JS模块代码，后续又被当作CSS去解析，所以才会出现「Invalid CSS after "": expected 1 selector or at-rule, was "var result = requir"」的奇怪报错。我帮你梳理下排查和解决的具体步骤：

1. 检查Webpacker的loader配置冲突 #

先打开config/webpack/environment.js，看看你是不是跟着旧指南手动添加了重复的样式相关loader（比如to-string-loader、css-loader这类重复配置）。

现在Webpacker的Angular预设已经内置了处理组件样式的正确loader链，完全不需要额外手动叠加。如果你的配置里同时存在Webpacker默认的sass loader和手动添加的样式loader，就会导致SCSS文件被两次处理：第一次输出JS模块代码，第二次把这段JS代码当成CSS解析，直接触发语法错误。

修正后的environment.js示例： #

const { environment } = require('@rails/webpacker');
const angular = require('./loaders/angular');

// 只保留Angular预设的loader即可，不要额外添加样式相关loader
environment.loaders.append('angular', angular);

module.exports = environment;

2. 确认Angular组件的样式引用方式 #

在你的app.component.ts里，确保styleUrls用标准Angular格式，不需要额外的loader前缀：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'] // 直接指向SCSS文件即可
})

别在样式路径里加!to-string-loader!这类loader前缀，Webpacker的Angular配置已经帮你处理了样式的导入和转换逻辑。

3. 清理缓存并重启服务 #

做完配置修改后，执行以下步骤确保缓存完全清理：

• 运行 rails webpacker:clean 清理Webpack缓存
• 重新安装依赖：yarn install（或npm install）
• 重启 webpack-dev-server 和 Rails 服务器

问题根源说明 #

你参考的旧指南配置是针对早期版本的Webpacker，而Webpacker后续更新已经优化了Angular样式的处理逻辑，内置了to-string-loader等必要loader的正确执行链。手动重复添加这些loader会导致样式文件被多次编译，最终把JS代码当成CSS解析，引发语法错误。

内容的提问来源于stack exchange，提问作者Haronious