Angular中支持SCSS

最新推荐文章于 2025-02-27 18:12:53 发布

一路斜阳

最新推荐文章于 2025-02-27 18:12:53 发布

阅读量5.2k

点赞数

分类专栏： Angular2 文章标签： angular SCSS

本文链接：https://blog.youkuaiyun.com/zhaoruda/article/details/72989762

版权

Angular2 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Angular工程中启用SCSS支持，包括在创建新工程时通过ng new命令指定--style=scss选项，以及如何修改现有工程的angular-cli.json文件，调整stylesExt和styles配置，将默认样式后缀改为scss。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　在为组件添加样式时，为了样式的模块化，通常我们会使用SCSS、SASS。那么如何让我们的Angular工程支持SCSS或者SASS呢？下面将从以下两中方式来介绍：

创建工程时来指定
修改当前的工程

１、创建工程时来指定

在指定目录下运行：ng new myProject –style=scss
注：这里使用的Angular的CLI来创建工程的。
如果要指定SASS，则将scss换为sass即可。

2、修改当前工程

修改angular-cli.json文件，主要有两个地方需要修改：

将defaults中styleExt值设置为scss

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

这样我们在运行ng g component myComponent 等命令生成文件时，默认后缀就是scss
在apps下的styles中将styles.css修改为styles.scss

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],