Question

我正在尝试使用webpacker和Angular设置一个新的Rails项目。基本设置正常，但我无法包含自定义SCSS文件。我按照博文Angular with Rails and Webpacker中的步骤进行操作，但我无法启动并运行。我最终得到了错误

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: 
h1 {
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var result = requir"
      in /Users/florianfeldhaus/IdeaProjects/rails-test/app/javascript/hello_angular/app/app.component.scss (line 1, column 1)

I documented all steps I carried out（我先试过没有，然后用博客文章中描述的黑客攻击），但无法让它发挥作用。 I shared a minimal project (e.g. without the HTML template) on GitHub

我需要做什么才能为使用Webpacker的Rails 5提供的Angular 5 App包含SCSS文件？
是否有适用于此设置的完整，最新教程或文档？

Answer 1

我终于找到了答案。我相信问题是sass-loader已默认包含在某处。当你在environment.js中将它添加到你的加载器时，它实际上尝试加载sass-loader两次并导致一个神秘的错误。因此，解决方案是使用以下代码覆盖现有条目，然后还包括css-loader和to-string-loader，以便将其包含在Angular组件中。

environment.loaders.insert('sass', {
    test: /\.scss$/,
    use: [
        "to-string-loader", // creates style nodes from JS strings
        "css-loader", // translates CSS into CommonJS
        "sass-loader" // compiles Sass to CSS
    ]
});

如何在Webpacker的Rails 5中包含Angular 5的SCSS文件

1 个答案: