Question

我正在尝试用角度学导轨，但是我希望实现scss-loader。我已经在谷歌搜索。我已经添加了他们正在尝试做的事情，但是不幸的是什么也没有发生，而且我总是遇到这个错误 NSLocalizedString。

我添加了scss.d.ts

Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"

这是我的environment.js

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

甚至添加一个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

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

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

Answer 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

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

1 个答案: