MiniCssExtractPlugin извлечь файл css из веб-пакета глобальных стилей приложения - PullRequest
0 голосов
/ 16 мая 2018

Я использую Angular 6 Framework вместе с модулем Webpack 4. У меня есть 2 файла конфигурации webpack.

Глобальные стили приложения размещаются внутри пути «Содержимое / Стили». Каждый угловой стиль компонента помещается в соответствующую папку компонента внутри пути «scripts / app». например, «scripts / app / dashboard / dashboard.component.scss»

Общая конфигурация Webpack содержит следующее правило для файлов 'scss'.

webpack.common.js:

module: {
   rules: [
      ...
      {
                test: /\.scss$/,
                use: ["to-string-loader", "css-loader", "sass-loader"],
                exclude: [helpers.root("Content", "Styles")]
      },
      ....
   ]
}

Настройка Webpack dev содержит следующее правило для глобальных файлов 'scss'.

webpack.dev.js:

module: {
  rules: [
    ...
    {
                test: /\.scss$/,                    
                include: [helpers.root("Content", "Styles")],
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: {
                                safe: true
                            }
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: function () { // post css plugins, can be exported to postcss.config.js
                                return [
                                    require("precss"),
                                    require("autoprefixer")
                                ];
                            }
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {}
                    }
                ]
            },
         ....
  ]
}

Я хотел бы добавить извлеченный глобальный CSS-файл в index.html. Проблема в том, что правило dev не применяется, когда у меня есть опция include. Когда эта опция отсутствует, правило применяется ко всем файлам scss моего приложения, создавая файл 'css', содержащий также все стили компонентов. Может кто-нибудь сказать мне, что я делаю не так?

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