如何在 webpacker 角轨中添加 scss 加载器？答案

【问题标题】：How to add scss loader in webpacker angular rails?如何在 webpacker 角轨中添加 scss 加载器？
【发布时间】：2019-08-21 13:26:30
【问题描述】：

我正在尝试使用 angular 来研究 Rails，但我正在实施 scss-loader。我已经在谷歌搜索了这个。我已经添加了他们正在尝试做的事情，但不幸的是什么也没发生，我总是遇到这个错误 Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"。

我添加 scss.d.ts

declare module "*.scss" {
    const content: string
    export default content
  }

这是我的 environment.js

const { environment } = require('@rails/webpacker')

const typescript =  require('./loaders/typescript')

environment.loaders.prepend('typescript', typescript)

environment.loaders.prepend('html', {
    test: /\.html$/,
    use: [{
      loader: 'html-loader',
      options: {
        minimize: true,
        removeAttributeQuotes: false,
        caseSensitive: true,
        customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
        customAttrAssign: [ /\)?\]?=/ ]
      }
    }]
  })

environment.loaders.prepend('style', {
  test: /\.(scss|sass|css)$/,
  use: [{
      loader: "to-string-loader"
  }, {
      loader: "css-loader"
  }, {
      loader: "resolve-url-loader"
  }, {
      loader: "sass-loader"
  }]
})

module.exports = environment

甚至添加stylesheet_pack_tag

<%= stylesheet_pack_tag 'application' %>
<div>
<default-selector></default-selector>
</div>
<%= javascript_pack_tag 'application' %>

我有错误。我的 sass-loader 版本在这里重要吗？

{
  "name": "acbook_angular",
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.8",
    "@angular/compiler": "^7.2.8",
    "@angular/core": "^7.2.8",
    "@angular/platform-browser": "^7.2.8",
    "@angular/platform-browser-dynamic": "^7.2.8",
    "@angular/router": "^7.2.10",
    "@rails/webpacker": "^4.0.2",
    "core-js": "^2.6.5",
    "html-loader": "^0.5.5",
    "rxjs": "^6.4.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3333",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "resolve-url-loader": "^3.0.1",
    "sass-loader": "^7.1.0",
    "to-string-loader": "^1.1.5",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1"
  }
}

【问题讨论】：

标签： ruby-on-rails angular webpack sass

【解决方案1】：

我已经通过更换环境解决了

environment.loaders.prepend('style', {
  test: /\.(scss|sass|css)$/,
  use: [{
      loader: "to-string-loader"
  }, {
      loader: "css-loader"
  }, {
      loader: "resolve-url-loader"
  }, {
      loader: "sass-loader"
  }]
})

到这里

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
    ]
});

感谢link

【讨论】：