Как добавить дополнительные плагины postCSS (postcss-preset-env) для Angular 7 - PullRequest
Новая
       19

Как добавить дополнительные плагины postCSS (postcss-preset-env) для Angular 7

4 голосов
/ 11 июня 2019

Я недавно начал реализовывать пользовательские свойства CSS, но должен поддерживать IE11 - отсюда и требование для postcss-preset-env. До сих пор я обнаружил, что конфигурация Angular Webpack не очень настраиваема, но с тех пор я установил собственный Webpack (https://www.npmjs.com/package/@angular-builders/custom-webpack).

Как настроить файл конфигурации для включения и настройки плагина postcss-preset-env, чтобы правильно заполнить мои пользовательские свойства CSS для работы во всех браузерах? Я ожидаю, что любые CSS-файлы, а также стили компонентов Angular будут скомпилированы с помощью postcss-preset-env. До сих пор я создал файл custom-webpack.config.js со следующим: 

const postcss = require('postcss-loader');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcss([
      postcssPresetEnv()
    ]).process()
  ]
}

Я также обновил свойство сборки angular.json для ссылки на этот файл.

1 Ответ

0 голосов
/ 23 июня 2019

Следуйте этому руководству: https://medium.com/@jontorrado/working-with-webpack-4-es6-postcss-with-preset-env-and-more-93b3d77db7b2

webpack / loaders.js 

const CSSLoader = {
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: __dirname + '/postcss.config.js'
        }
      },
    },
  ],
};

module.exports = {
  CSSLoader: CSSLoader
};

webpack / postcss.config.js 

module.exports = {
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions',
    }
  },
};

webpack / webpack.config.js 

module.exports = {
  ...
  module: {
    rules: [
      loaders.CSSLoader
    ]
  }
};
...