Angular 7 + webpack 4: SCSS не применяются в производственном режиме - PullRequest
0 голосов
/ 19 марта 2019

SCSS не применяются для производственного режима.Тем не менее, это работает для режима разработки.Одно заметное отличие, которое мы обнаружили, заключается в том, что теневой DOM не создается для сборки prod.Если в этом проблема, как это исправить?

Ниже приведен фрагмент 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
        })
    ]
},

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...