0

我在 Angular 应用程序中使用 fusebox，我使用 scss 文件而不是常规 css。

我的插件配置如下：

plugins: [
    [SassPlugin(), CSSPlugin()],
    CSSPlugin(),
    Ng2TemplatePlugin()
  ]

Ng2TemplatePlugin 用于能够将stylesUrl 和templateUrl 转换为带有require 的常规样式和模板。

现在，我使用的 scss 之一是导入其他一些 scss 文件。

@import '../styles/globals';

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

当我检查我捆绑的 app.js 时，我看到了这个：

___scope___.file("app/app.component.scss", function(exports, require, module, __filename, __dirname){

@import '../styles/globals';

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
});

据我所知，fusebox 应该已导入 ../styles/globals 并在此处附加而不是 @import，但它没有，现在加载我的应用程序时出现错误。

我认为 SassPlugin 应该正是这样做的。

谢谢

4

1 回答 1

1

好的，我设法完成了这项工作，所以在这里它可以帮助某人：

plugins: [
    Ng2TemplatePlugin(),
    ['*.component.scss', RawPlugin()],
    HTMLPlugin({
      useDefault: false
    }),
    [SassPlugin(), CSSPlugin()],
    CSSPlugin(),
    WebIndexPlugin({
      path: '.',
      template: 'src/index.html'
    })
  ]

因此，我使用 RawPlugin 将 scss 作为我的组件中的字符串，然后 SassPlugin 和 CSSPlugin 将处理它。

另外，HTMLPlugin 用来处理模板。

于 2017-06-19T08:01:40.253 回答