Angular2-webpack-starter 工具包和 SCSS 支持

Question

我有一个主 scss 文件，其中包含对我所有次要 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
    }

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

错误：预期的“样式”是字符串数组。

这是我的组件的样子。 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 文件。