将 SCSS 与 Angular 2/4 一起使用的架构答案

【问题标题】：Architecture for using SCSS with Angular 2/4将 SCSS 与 Angular 2/4 一起使用的架构
【发布时间】：2017-11-26 15:30:24
【问题描述】：

我正在尝试设置一个架构，以便在我的 angular 4 项目中使用SCSS，而不是普通的CSS。到目前为止，我一直遵循 Angular Style guide 将 CSS 安排在与组件 ts 文件相邻的位置，每个组件都有一个单独的目录，就像遵循功能优先的方法一样。

由于现在我开始使用SCSS，我简单地将我的CSS 文件替换为SCSS 文件。但我不明白，我应该把我的_variables.scss、_mixins.scss 和常见的styles.scss 文件放在哪里，这样变量总是最先加载，这样变量依赖关系就可以在@987654333 中解决@ 文件。

我正在使用 webpack 编译我的 SCSS 文件。

webpack.config.js

module: {
    rules: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[ext]'
        },
        {
           test: /\.scss$/,
           use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader" }
            ]
        }
    ]}

由于我不太擅长设计和构建应用程序，因此非常感谢任何帮助。

【问题讨论】：

你有几个选择。我们使用 bootstrap 和 sass。您需要将 sass bootstrap 包包含到您的项目中。参考：github.com/AngularClass/angular-starter/wiki/…
您知道不包括引导程序或其他样式库的任何方法吗？我的项目要求我为 Angular 小部件库构建自己的 CSS 框架，并尽可能减少空间。
你可以参考这个帖子：stackoverflow.com/questions/42433995/using-sass-in-angular-2
仅供参考：ts 和 scss 加载器已经内置在 Webpack 2.x 中
@deezg 我不仅想使用局部组件变量，还想在整个 Web 应用程序中使用全局变量。对于ex-$colorPrimary，$colorAccent，你提到的帖子只展示了如何使用局部变量。

标签： angular typescript webpack architecture sass

【解决方案1】：

如果你想要一些通用的样式代码，并且你已经在使用 Webpack，然后您可以简单地将常用样式导入您的主模块。例如：

目录结构

/src
  /app
    app.component.html
    app.component.ts
    app.component.scss
  /styles
    _mixins.scss
    _variables.scss
    common.scss
  app.module.ts
  main.ts

在你的 app.module.ts 文件中你可以import './styles/common.scss', 这将基本上将你所有的 mixins 和这些导入到它。您的 app.component.scss 文件可能需要导入“../styles/variables” 或许还有一些 mixin。

拥有通用样式表的另一个选择是简单地导入需要时将它们放入组件 *.scss 文件而不是一下子把他们都带进来。这可能会阻止您导入你真的不需要的部分。

【讨论】：

我按照你的要求做了。我已使用styleUrls: [] 在AppComponent 中导入了variables.scss 内的app.component.scss 和app.component.scss 文件。但仍然在其他组件SCSS 内部，变量没有得到解决。

【解决方案2】：

有人开发了一个 seed 角度应用程序，考虑了 SASS 和完美的架构以及人们可能需要的所有其他东西。

尽情探索吧。这对我来说很神奇。

Angular Library Seed

【讨论】：