Как развернуть файл SCSS для dist в angular 6?

Question

При сборке 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"
        ]
      },

Answer 1

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

Добавление этого под активами в файл angular.json работает для меня.Я искал в неправильной папке.

Answer 2

Из коробки; угловой 6 не предоставляет способа сделать это изначально.Тем не мение;вы можете достичь того, что вы описываете, используя пользовательскую конфигурацию веб-пакета , в которой используются сборщики Angular 6.

Например, вы можете использовать Custom Webpack Builder .Из-за природы сборщиков их конфигурация объединяется с собственной конфигурацией CLI, поэтому все, что вам нужно сделать, это создать минималистичную конфигурацию с использованием Webpack Copy Plugin ;затем используйте шаблоны глобуса, чтобы перехватить и скопировать все необходимые файлы .scss в каталог dist/.

Вы можете попробовать поиграться с аналогичной конфигурацией веб-пакета:

"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/")));