Css sass如何与angular4中的webpack一起工作？

我们可以直接在index.html中引用sass文件而不是css文件吗

如果可能的话，网页如何将sass编译成css文件？另外，在构建应用程序时捆绑sass文件的最佳方式是什么

我正在使用以下版本：

网页包（3.5.5）、angular/cli（1.4.1）和angular4

我的文件夹结构是这样的

src
├--- assets
|    ├--- sass
|    |    ├--- common.scss
|    |    ├--- base.scss
|    |    ├--- coustom.scss
|    ├--- css
|         ├--- common.css
|         ├--- base.css
|         ├--- coustom.css
|
├--- index.html
├--- .angular-cli.json

---

首先，浏览器不理解

scss

ot

less

。因此，在浏览器中运行时，您必须编译并将它们转换为css

当您使用angular cli时，有一种非常简单的方法可以做到这一点，并且不需要配置

新cli项目 因此，在生成项目时，可以传递一个标志，告诉cli选择SCS而不是css

ng new projectname --style scss

现有项目 如果是现有的cli项目，您可以编辑

.angular cli.json

文件，将css更改为scss

首先，你的风格需要scss

  "styles": [
    "/asset/scss/common.scss",
    "/asset/scss/base.scss",
    "/asset/scss/custom.scss",
    "/asset/scss/common.css",
    "/asset/scss/base.css",
    "/asset/scss/custom.css",
    "styles.scss"
  ],

默认样式为scss

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

对于外部js库，您可以添加一个

脚本

块，然后在那里添加脚本。它将自动添加到您的构建中

  "scripts": [
    "../node_modules/jquery/dist/jquery.js"
  ],

---

完成此设置后，您可以在cli配置中添加所有css和scss文件。正如您所说，如果我们在.angular/cli.json中指定scss文件，是否需要在my index.html文件中再次引用scss文件？现在，我的LOC是这样的

您还可以指定在构建应用程序时绑定sass文件的最佳方式吗？不，而build angular cli将处理它。它将使用您所有的SCS和css文件，生成一个web包，并向您的索引文件添加链接。你不必手工做，我想这是最好的。cli将完成所有操作，您无需执行任何操作<代码>ng构建--prod将从prod执行所有操作