如何将 SCSS 文件部署到 Angular 6 中的 dist？答案

【问题标题】：How to deploy SCSS file to dist in angular 6?如何将 SCSS 文件部署到 Angular 6 中的 dist？
【发布时间】：2018-12-04 08:28:18
【问题描述】：

在构建 Angular 时，我们需要将 scss 文件部署到 dist 目录。我完全知道在构建之后应该只部署 css，但是我们有自定义需要在运行时读取 scss 文件并执行某些操作。

我尝试在 angular.json 文件中添加以下行（脚本下的最后一行：），但这没有帮助。我在调试过程中找不到任何部署的文件。

    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/scss/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js",
          "src/scss/_custom-variables.scss"
        ]
      },

【问题讨论】：

标签： sass angular6

【解决方案1】：

        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/scss/_custom.scss"
        ],

在 angular.json 文件中的资产下添加它对我有用。我看错了文件夹。

【讨论】：

【解决方案2】：

开箱即用； angular 6 不提供本地执行此操作的方法。然而;您可以通过使用 Angular 6 构建器的 custom webpack configuration 来实现您所描述的。

例如，您可以使用Custom Webpack Builder。由于构建器的性质，他们的配置与 CLI 自己的配置合并，因此您需要做的就是使用 Webpack Copy Plugin 创建一个简约的配置；然后使用 glob 模式捕获所有必需的 .scss 文件并将其复制到 dist/ 目录。

你可以尝试摆弄类似的 webpack 配置：

"use strict";

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
        {
          from: "src/app/**/*.scss",
          to: "dist/app/"
        }
      ]
    )
  ]
};

或者如果您在开发过程中不需要弹出 SCSS 并且仅在生产包中，您可以使用简单的Gulp 任务来复制文件

"use strict";

let gulp = require("gulp");

gulp.task("copy:styles", () =>
  gulp.src(["src/app/**/*.scss"])
    .pipe(gulp.dest("dist/app/")));

【讨论】：