在角度 2 中使用 Sass

Posted

技术标签:

【中文标题】在角度 2 中使用 Sass【英文标题】:Using Sass in angular 2 【发布时间】:2017-07-15 00:16:22 【问题描述】:

我正在尝试在我的 Angular 2 项目中设置 Sass。基本上据我了解,有两种方法可以创建 Angular 2 项目

1) 使用angular-cli (https://github.com/angular/angular-cli)

我参考了https://***.com/a/41541042/2868352 中提到的答案,并且我可以在 angular 2 项目中成功使用 scss 文件,一切正常,但我无法在项目文件夹中的 scss 文件中找到生成的 css 文件。谁能解释为什么没有生成css 文件但它仍然有效?

2) 使用quickstart seed (https://angular.io/guide/quickstart)

我无法获得有关如何在快速启动项目中设置 sass 的任何信息。有人知道在angular提供的快速入门项目中使用sass吗?

提前致谢!

【问题讨论】:

angular-cli 使用 webpack,它在生产构建之前不会创建 css 文件,它可能会根据配置生成一些文件。对于quickstart,只需在 npm start 命令中添加 node-sass 调用,它将自动工作 @smnbbrv 感谢您的解释。在 angular-cli 中使用 sass 现在很清楚了。但是对于快速入门,在 npm start 命令中添加 node-sass 调用似乎不起作用。不应用 scss 样式。我需要做额外的事情吗? 【参考方案1】:

这里有两个主要场景。

    创建新的 Angular CLI 项目时,使用 CLI 命令

    ng new my-angular-app --style=scss

    当 Angular CLI 项目已经建立后,使用 CLI 命令

    ng set default.styleExt scss

在情况 2 中,您需要手动转换现有的 .css 文件。您也可以使用sassless 而不是scss

在此处查看全文。

Using SCSS/SASS/LESS in Angular CLI Project

【讨论】:

【参考方案2】:

[如果您使用 angular cli,请检查此答案末尾的编辑部分]

解释如何在“快速启动种子”中使用 sass(https://angular.io/guide/quickstart) (https://angular.io/guide/setup#download)

请按照以下简单步骤操作:

第 1 步:设置快速入门种子

使用以下命令进行设置

npm install
npm start

您将在浏览器上看到“Hello Angular”。

第 2 步:安装 node-sass 和 sass-loader

使用下面提到的命令安装

npm i node-sass -S
npm i sass-loader -S

现在您可以在“package.json”文件中的“依赖项”中看到这两个添加。

第 3 步:为 Sass 代码和 Css 代码创建 2 个文件夹

在“quickstart-master”文件夹中创建两个任意名称的文件夹。在这种情况下,例如: “sass_folder”和“css_folder”。现在创建一个演示文件“demo.sass”并将其放在“sass_folder”中。你可以在这个 .sass 文件中放一个简单的 sass 代码。它看起来像这样:

  $font-stack:    Helvetica, sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

第 4 步:更改“package.json”文件

将脚本添加到“sass_folder”中的构建和监视 Sass 代码。编译后,生成的 css 代码应存储在“css_folder”中。更改“package.json”文件中的“脚本”后应如下所示:

"scripts": 
     "build": "tsc -p src/",
     "build:watch": "tsc -p src/ -w",
     "build:e2e": "tsc -p e2e/",
     "serve": "lite-server -c=bs-config.json",
     "serve:e2e": "lite-server -c=bs-config.e2e.json",
     "prestart": "npm run build",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
     "pree2e": "npm run build:e2e",
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
     "preprotractor": "webdriver-manager update",
     "protractor": "protractor protractor.config.js",
     "pretest": "npm run build",
     "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
     "pretest:once": "npm run build",
     "test:once": "karma start karma.conf.js --single-run",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "build:sass": "node-sass sass_folder/ -o css_folder",
     "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  

仅查看“start”、“build:sass”和“watch:sass”。

第 5 步:运行应用程序

现在您可以使用以下命令运行应用程序:

npm start

您将在“css_folder”中看到已编译的 css 代码,文件名为“demo.css”。它看起来像这样(在这种情况下):

body 
  font: 100% Helvetica, sans-serif;
  color: #000; 

现在,如果您对 .sass 文件进行任何更改,它将在脚本监视代码时动态反映到 .css 文件中。

如果显示错误,请在对 .sass 文件进行任何更改时关闭 .css 文件。

注意:对于 scss 代码,您可以按照相同的步骤操作。在这种情况下,您只需将 .scss 文件放在“sass_folder”中即可。

[编辑] 如果您想使用 Angular CLI:

在创建新的 Angular 项目时使用下面提到的 cmnds:

对于萨斯:

ng new Demo_Project --style=sass

对于scss:

ng new Demo_Project --style=scss

更改现有样式:

ng set defaults.styleExt scss

之后就可以正常使用cli了。

【讨论】:

感谢详细步骤。现在我应该将 css_folder 中生成的 css 文件链接到 html 文件,对吗?我的意思是这样 - <link rel="stylesheet" href="css_folder/styles.css"> ? 除了链接到 html 文件之外,您还可以在 .ts 组件文件中添加 @Component 的 'styleUrls' 中的路径。 最好知道如何使用 Angular CLI 的默认服务命令 ng serve 而不是 npm start 来运行它 @DannyBullis 我已经编辑了答案,如果您使用的是 angular cli,请在答案末尾查看 您应该补充一点,您实际上必须输入npm run watch:sass 才能观看更改。这个答案误导性地听起来好像只需运行npm start 就可以完成。但事实并非如此。你甚至可以看到,build:watch 脚本从不调用 watch:sass【参考方案3】:

我可以给你解释第一个。

如果您使用ng server,编译后的文件将保存在项目的隐藏文件夹中。

如果您使用ng build,您可以在/dist 文件夹中看到您的编译文件。在这个文件夹中,您可以在文件 styles.[hashversion].css 中找到您的通用样式,但本地组件样式包含在 Webpack 的 main.[hashversion].js 中。

Angular-cli 使用 webpack,如果你想了解更多,请参阅Webpack Docs

更新

在第二种情况下,您必须手动编译 sass。在 app 文件夹中,有一个 app.component.ts 将由 Typescript 编译器在同一个文件夹中编译为 app.component.js。所以你必须对 sass 做同样的事情。 在组件中导入 CSS 文件。

@Component(
  selector: 'my-app',
  template: `<h1>Hello name</h1>`,
  stylesUrl: ['app/app.component.css']
)
export class AppComponent   name = 'Angular'; 

注意到您不能使用相对路径,因为所有内容都将从根目录请求。

创建一个app.component.sass 并将您的样式放入其中。

然后执行sass编译器,将app.component.sass编译成app.component.css

运行服务器,它就会工作。

【讨论】:

感谢您的解释。第一个疑问现在已经解决了。对快速入门种子中的 sass 有任何想法吗?

以上是关于在角度 2 中使用 Sass的主要内容,如果未能解决你的问题,请参考以下文章

从 angular 2 typescript 编辑 SASS 变量

scss 角度sass

在 Webpack 2 中使用 TypeScript 加载 SASS 模块

在 Nuxt 中使用最新的 SASS 和 @use

从主机组件角度覆盖子组件样式的正确方法

Sass 入门