如何在Angular 2中添加导入SCSS文件 [英] How to add to import SCSS files in Angular 2

问题描述

我想问一下如何将所有.scss文件导入到一个css文件中.例如，我有全局的scss文件，例如colors.scss，mixins.scss和helpers.scss.我正在考虑有一个.scss文件，而我只是@import来加载我的所有.scss文件.我正在使用angular-cli创建项目.

I would like to ask how to import all my .scss files in one css file. For example i have global scss files like colors.scss, mixins.scss, and helpers.scss. I'm thinking to have one .scss files and I just @import to load all my .scss files. I'm using angular-cli in creating my project.

谢谢！

推荐答案

1您在src目录下创建了一个全局styles.scss文件.

1 You create a global styles.scss file under src directory.

2接下来，您将该文件添加到angular-cli.json样式数组:

2 Next you add that file to angular-cli.json styles array:

 "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": "assets",
            "index": "index.html",
            "main": "main.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.json",
            "prefix": "app",
            "mobile": false,
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "environments": {
                "source": "environments/environment.ts",
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],

3将所有.scss文件导入styles.scss

3 Import all of your .scss files in styles.scss

@import 'styles/colors.scss';

这篇关于如何在Angular 2中添加导入SCSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！