Angular 7 + Webpack 4：SCSS不适用于生产模式

Question

SCSS不适用于生产模式。但是，它适用于开发模式。我们发现的一个显着区别是，影子DOM并未为产品构建而创建。如果那是问题的解决方法？

以下是 webpack.config.common.js 的代码段（为便于理解，仅添加与CSS相关的配置）

const isDev = process.env.NODE_ENV !== 'production';
module.exports = {
   module: {
    rules: [
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            isDev ? 'to-string-loader' : ExtractCssChunks.loader,
              'css-loader',
            'sass-loader'
          ],
          include: [
            helpers.root('src', 'app')
          ]
        },
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ],
          include: [
            helpers.root('src', 'styles'),
          ]
        },...and other rules]
  },
  plugins: [
    new ExtractCssChunks({
      filename: isDev ? '[name].css' : '[name].[hash].css',
      chunkFilename: isDev ? '[id].css' : '[id].[hash].css'
    }),

    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),... and other plugins
]};

webpack.config.prod.js ：

const commonConfig            = require('./webpack.config.common');


module.exports = webpackMerge(commonConfig, {
mode: 'production',

output: {
    path: helpers.root(buildFolder),
    publicPath: '/',
    filename: '[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
},

optimization: {
    noEmitOnErrors: true,
    splitChunks: {
        chunks: 'all'
    },
    runtimeChunk: 'single',
    minimizer: [
        new TerserPlugin({
            parallel: true,
            terserOptions: {
                ecma: 6
            }
        }),
        new OptimizeCSSAssetsPlugin({
            cssProcessor: cssnano,
            cssProcessorOptions: {
                discardComments: {
                    removeAll: true
                }
            },
            canPrint: false
        })
    ]
},

});