Mini-css-extract-plugin не объединяет мой css в один файл с помощью sass

Когда я пытаюсь добавить sass-loader и запустить webpack, в папке dist есть несколько файлов chunck .css, а не только один в комплекте с именем "style.css".

Моя выходная папка dist выглядит так:

0.e749007119be51de03e4.js  1.e749007119be51de03e4.js  bundle.e749007119be51de03e4.js
0.style.css                1.style.css

Я предполагаю, что это из-за плагина Mini-css-extract-plugin, но я не могу понять, как это исправить.

Вот мой файл webpack:

const webpack = require('webpack');
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const ROOT = resolve(__dirname);
const SRC = resolve(ROOT, 'src');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: {
    bundle: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client?reload=true',
      resolve(SRC, 'client', 'index.js'),
    ]
  },
  output: {
    path: resolve(ROOT, 'dist', 'client'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        include: resolve(__dirname, 'node_modules', 'react-toolbox'),
        use: [
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]_[local]_[hash:base64:5]'
            }
          },
          // 'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.css$/,
        exclude: resolve(__dirname, 'node_modules', 'react-toolbox'),
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpe?g|svg|png|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ]
};

Есть идеи ?

Это расщепление кода, почему вас это беспокоит? Помогает ... большой размер файла вредит пользователю

PlayMa256 16.08.2018 15:04

При таком подходе возникают две проблемы. Если я хочу использовать такой плагин, как html-webpack-plugin, файл index.html больше не заполняется <link href = "/bundle.css" rel = "stylesheet">. Во-вторых, нормальное поведение MiniCssExtractPlugin не должно заключаться в создании файла style.css, как я уточнил в конструкторе?

Adam Soto 16.08.2018 15:24

Нет, поскольку у вас есть асинхронные фрагменты, он создаст style.css для каждого стиля, который будет удален из этих асинхронных фрагментов.

PlayMa256 16.08.2018 15:25

Уверяю вас, что если вы используете html-webpack-plugin, он будет работать. Он просто не добавлен туда, потому что эти css пришли не из одной из точек входа. Вот почему он не вставляется прямо в html. У меня есть аналогичный проект, и он отлично работает.

PlayMa256 16.08.2018 15:26

Хорошо, я понимаю, но дело в том, что я хочу сделать SSR в ближайшем будущем, не следует ли мне также вставлять CSS, и он будет работать?

Adam Soto 16.08.2018 15:29

Если они не отправляются из точки входа, они будут загружаться динамически веб-пакетом после запроса этих фрагментов.

PlayMa256 16.08.2018 15:30

Похоже на волшебство, но все равно попробую!

Adam Soto 16.08.2018 15:33

Кажется, вы сразу после поиска в файле bundle.js я нашел этот bundle.js 793:/******/ var href = "" + chunkId + ".style.css";

Adam Soto 16.08.2018 15:43

видеть?? :) мощь разделения кода !!!

PlayMa256 16.08.2018 15:50

я отправлю это как ответ на все вопросы, которые вы задали

PlayMa256 16.08.2018 15:50

Что-то у меня сломано. У меня в папке dist есть 0.style.css, но он никогда не загружается, когда компоненты загружаются асинхронно.

Thanasis Ioannidis 28.09.2018 16:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
11
3 658
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Взгляните на этот фрагмент кода из документации

module: {
  rules: [
    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader',
      ],
    }
  ]
}

если вы внимательно посмотрите, то увидите, что он использует style-loader в режиме разработки и MiniCssExtractPlugin.loader для производства. Поэтому в процессе производства он сгенерирует еще один файл для css.

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

В вашем файле package.json в разделе сценария вам нужно передать переменную env devMode следующим образом

"scripts": {
  "webpack": "webpack",
  "start": "npm run webpack -- --env.mode=development"
}

Тогда в вашем файле webpack.config.js вам нужно сделать это

module.exports = (env) => {
  const devMode = env.mode === 'development'
  return {
    mode: env.mode, // will be development
    devtool: ...,
    entry: { ... },
    output: { ... },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }          
      ]
    }
  }
}

Это должно быть нормально, надеюсь, это поможет.

Во-первых, спасибо за быстрый ответ! Я тоже видел это раньше в документации, проблема в том, что даже если я пытаюсь сделать это с style-loader в режиме разработки, файлы scss больше не выводятся ни в одном файле .css ..

Adam Soto 16.08.2018 15:18

Вы пробовали объединить свои правила для css, возможно, в этом проблема, прямо сейчас у вас их пара

Arnold Gandarillas 16.08.2018 15:24

Я не могу их объединить, потому что я использую определенную конфигурацию с include / excluse для библиотеки react-toolbox .. Я все равно попробую :)

Adam Soto 16.08.2018 15:32
Ответ принят как подходящий

There is two problems coming with this way. If i wanna use a plugin like html-webpack-plugin the index.html file is not filled with the anymore. Secondly the normal behavior of MiniCssExtractPlugin shouldn't be to create a file style.css like i precised in the constructor ?

Нет, поскольку у вас есть асинхронные фрагменты, он создаст style.css для каждого стиля, который будет удален из этих асинхронных фрагментов.

Уверяю вас, что если вы используете html-webpack-plugin, он будет работать. Он просто не добавлен туда, потому что эти css пришли не из одной из точек входа. Вот почему он не вставляется прямо в html. У меня есть аналогичный проект, и он отлично работает.

Если они не исходят из точки входа, они будут загружаться динамически веб-пакетом после запроса этих фрагментов.

Большие файлы вредит пользователям. Разделение кода - всегда ответ на все вопросы !!

Кажется, это правильный ответ, я пометил его как решение, пока все тестирую!

Adam Soto 16.08.2018 16:01

Другие вопросы по теме