css - 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 block 并在那里添加您的脚本。它将自动添加到您的构建中。

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