Как использовать mini-css-extract-plugin для объединения импортированных css и css, сгенерированных из scss, в один файл?

Question

Я использую Webpack 4 и mini-css-extract-plugin в приложении php. Я сохраняю все стили css, которые я написал, в файлах scss, но в некоторых случаях, когда я импортирую внешнюю библиотеку, я импортирую ее CSS в сценарий, где я ее использую. Моей конечной целью было бы иметь все стили CSS в одном файле CSS, который я могу вручную включить в представление php, но в данный момент я получаю scss в файле и css из библиотек в другом.

Моя текущая конфигурация веб-пакета такая:

module.exports = {
  devtool: 'source-map',
  entry: {
  style: './resources/assets/sass/style.scss',
  ...
},
 optimization: {
   splitChunks: {
     cacheGroups: {
       default: false,
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          //minChunks: 2,
        },
      },
    },
  },
  module: {
    rules: [
      { 
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: { config: { path: 'postcss.config.js' } },
          },
          'sass-loader',
        ],
      },
plugins: [
new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
    }), 
new webpack.ProvidePlugin({
     noUiSlider: 'nouislider',
   }),
]

Стили scss работают правильно, но тогда в одном скрипте у меня есть это:

import 'nouislider/distribute/nouislider.css';

Это из сценария, включенного в ProvidePlugin, и этот CSS заканчивается в файле vendors.css, в то время как я хотел бы, чтобы он был в style.css вместе с остальными.

Что я делаю не так?

Edit: Как и предполагалось, я создал репозиторий github, воссоздающий проблему:

https://github.com/carlotrimarchi/webpack-test

Answer 1

РЕДАКТИРОВАТЬ:

Вы хотите:

... и этот файл CSS заканчивается в файле vendors.css, в то время как я хотел бы, чтобы это былов style.css вместе с остальными.

Используйте ответ Gautams.Все это слева, справа меня смутило.Просто укажите все файлы стилей в одном файле scss, и они будут объединены.Я до сих пор не понимаю, почему вы делаете отдельный импорт nouislider в scripts.js ...

Первый:

entry: {
  style: './resources/assets/sass/style.scss',

style.css не является точкой входа в ваше приложение, это script.js, поскольку это единственный файл js в вашем проекте, кроме node_modules.

webpack.config.js

 entry: {
        // style: './resources/assets/scss/main.scss',
        common: './resources/assets/js/script.js',
    },

В wp4: плагины, скрипты вендора, файлы css не являются точками входа в ваше приложение!Не добавляйте их в entry

Что вам нужно сделать:

1.) Измените точку входа, как указано выше

2.) Удалите раздел optimization в вашем webpack.config.js.Вам это не нужно.

3.) Удалите ProvidePlugin (не требуется)

4.) Импортируйте стили в свой файл ввода:

scripts.js:

import "../scss/main.scss"
import 'nouislider/distribute/nouislider.css';

console.log('test')

Стили отображаются в порядке их импорта.

WP4 автоматически создает оптимизированные выходные пакеты для вашего приложения.Таким образом, для вашего небольшого тестового репо и принятых изменений 1-4 вы получите один js bundle и один css bundle.

Answer 2

Добавьте @import '~nouislider/distribute/nouislider.css'; к одному из ваших файлов scss.Нет необходимости использовать ProvidePlugin для импорта css.

Символ ( ~ ) указывает веб-пакету искать в папке node_modules.Вы можете использовать этот метод для любых файлов css / scss из папки node_modules.