Question

我正在尝试设置一个架构，以便将SCSS与我的 angular 4 项目而不是普通CSS一起使用。 Uptil现在我已经跟随Angular Style guide来安排CSS，只是在组件ts文件旁边，每个组件都有一个单独的目录，如下面的功能第一种方法。

从现在开始使用SCSS，我简单地将CSS文件替换为SCSS个文件。但是我无法理解，我应该把我的_variables.scss，_mixins.scss和常见的styles.scss文件放在哪里，这样变量总是第一个加载，所以变量依赖可以在SCSS个文件中解析。

我正在使用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" }
            ]
        }
    ]}

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

Answer 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” 也许还有一些混音。

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

使用SCSS和Angular 2/4的架构

1 个答案: