Question

我有一个主scss文件，导入到我的所有seconday scss文件。我想把这个scss包含在我的组件中。我跟着How to include SCSS in components但只是出错了。如果我执行所有步骤，我会收到此错误：

   ./src/styles/os_theme.scss中的错误

模块构建失败：

//宽松地基于https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

^
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
  in D:\project\src\styles\os_theme.scss (line 1, column 1)

这是我主要scss开头的评论。

如果我删除了webpack.common.js的这一部分：

   {
      test: /\.scss$/,
      exclude: /node_modules/,
      loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
    }

当dev服务器运行时我没有得到任何错误，奇怪的是我的页脚获得了我期望的样式但是应用程序的其余部分没有运行，并且在控制台中我有这个错误：

错误：预期'styles'是一个字符串数组。

这是我的组件的样子。 app.component.ts

@Component({
   selector: 'app',
   encapsulation: ViewEncapsulation.None,
    styleUrls: ['../../src/styles/os_theme.scss'],
   templateUrl: 'app.component.html'
 })

文件夹结构是：

-src
--styles
--- os_theme.scss (as imports to my other files)
--- _general.scss
--- components
----_components.buttons.scss
- app
-- app.component.ts

我不理解什么？

Answer 1

我认为这些指南已弃用，但您可以查看commit和app.module.ts文件，了解他们如何使用scss和css个文件。

Angular2-webpack-starter kit和SCSS支持

1 个答案: