我正在尝试切换href一个<link />用于主题目的,并且SCSS主题存在于我的monorepo的包文件夹中,这些文件夹是符号链接的node_modules.我需要能够编译和引用这些.

我遇到了以下固定问题:angular/angular-cli#3401并且一直试图实现类似的东西:

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/dark.scss",
        "output": "dark",
        "lazy": true
    }
],

我的理解(也许是不正确的)是这会将dark.scss文件编译成dist/dark.bundle.css我可以通过http:// localhost:4200/dist/dark.bundle.css加载它但是它没有按预期工作.我误解了某些事情或完全错误吗？

如何编译SCSS文件node_modules,然后我可以在应用程序中延迟加载？我可以尝试另一种/更好的方法吗？

补充说明:

• 使用Angular版本 4.2.4
• 使用Angular CLI版本 1.3.0
• 这种方法的文档
• 我在monorepo工作,所以node_modules/@org/themes是一个符号链接
• 我已尝试使用ng serve --preserve-symlinks选项,以防上述问题.它没有任何区别

我已经研究过Angular Material docs网站解决这个问题的方式,看起来他们有一个自定义构建脚本,assets在服务应用程序之前将SCSS文件编译成目录中的CSS文件.我认为上面修复的问题消除了对这一步的需要,但也许没有.这是唯一可行的方法吗？

解决了

感谢@Kuncevic.我错过了--extract-css国旗.

工作配置:

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/src/dark.scss",
        "output": "themes/dark",
        "lazy": true
    }
],

使用以下服务脚本,我可以通过http:// localhost:4200/themes/dark.bundle.css访问它:

ng …

我有以下设置:

{
  "babel-core": "~5.8.25",
  "babel-eslint": "^4.1.3",
  "babel-loader": "~5.3.2",
  "babel-polyfill": "^6.2.0",
  "eslint": "^1.7.3",
  "eslint-config-airbnb": "^0.1.0",
  "eslint-loader": "~1.1.0",
  "eslint-plugin-angular": "~0.12.0",
  // ...
}

的WebPack:

module: {
  preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}],
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['ng-annotate', 'babel-loader?plugins[]=transform-decorators-legacy'],
    }
  ]
}

但是我收到以下错误:

TypeError: The plugin "transform-decorators-legacy" didn't export a Plugin instance 

有谁知道我在这里做错了什么？

UPDATE

我已经升级到Babel 6,现在有以下设置:

{
  "babel-core": "^6.0.0",
  "babel-eslint": "^4.1.3",
  "babel-loader": "^6.0.0",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-polyfill": "^6.2.0",
  "babel-preset-es2015": "^6.0.0",
  "babel-preset-stage-0": "^6.5.0",
  "eslint": "^1.10.0",
  "eslint-config-airbnb": "^4.0.0",
  "eslint-loader": "^1.2.0", …

[stylelint] Unexpected missing end-of-source newline (no-missing-end-of-source-newline)
[stylelint] Expected "backgroundColor" to be "backgroundcolor" (value-keyword-case)
[stylelint] Expected a trailing semicolon (declaration-block-trailing-semicolon)

如何阻止VS Code Styleint扩展报告此类内容？你可以看到它并不是特别有用:P

更新:

为了澄清,我有一个.stylelintrc配置文件,我的规则就像我想要的那样,但是我希望它能够使我的样式而不是我的JavaScript.该扩展的描述说:

stylelint自动验证具有以下语言标识符的文档:

......并且javascriptreact是其中一种语言标识符.我想知道如何阻止扩展验证javascriptreact文件.