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

Question

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

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

我正在使用以下版本：

webpack(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

Answer 1

首先浏览器不理解scss ot less。所以你必须在浏览器中运行时编译并将它们转换为 css。

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

新的 cli 项目

所以在生成项目时，您可以传递一个标志来告诉 cli 选择 scss 而不是 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 库，您添加一个 script 块并在那里添加您的脚本。它会自动添加到您的构建中。

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