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

Question

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

Моя текущая конфигурация webpack такая:

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 вместе с остальными.

Что я делаю неправильно?

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

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

Answer 1

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

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

Answer 2

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

Ты хочешь:

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

Используйте ответ Гаутамы. Все это слева, справа меня смутило. Просто проверьте все файлы стилей в одном 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,