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

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

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

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

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

Создайте минимальный репозиторий git, который воспроизводит вашу проблему, чтобы мы могли взглянуть ...

Legends 18.05.2018 00:37

@Legends Я отредактировал свой вопрос, добавив ссылку на минимальный репозиторий github. Я включил весь каталог node_modules, так что простого запуска npm run build должно быть достаточно

Carlo 22.05.2018 15:04

Вы нашли решение? У меня такая же проблема.

Bald 29.01.2019 09:30
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
4
3
6 381
2

Ответы 2

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

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

извините, возможно, я не совсем понял свой вопрос: плагин NoUiSlider импортируется с ProvidePlugin, файл nouislider.css импортируется внутри скрипта.

Carlo 17.05.2018 07:51

@Carlo import css с использованием вышеуказанного метода в одном из файлов ur scss

Gautam Naik 17.05.2018 07:53

Я все равно попробовал ваш метод, но он не работает. С моей текущей конфигурацией webpack, импорт nouislider.css непосредственно в main.scss в любом случае генерирует два отдельных css

Carlo 17.05.2018 10:16

Обновлено:

Ты хочешь:

...and this css ends up in vendors.css file, while I would like it to be in style.css together with the rest.

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

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

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

Мне нужен optimization, потому что на реальном веб-сайте у меня много точек входа и много библиотек в node_modules. Неужели проблема с размещением scss в качестве точки входа? У меня много точек входа, и мне нужен один и тот же CSS во всех из них

Carlo 23.05.2018 15:14

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

Legends 23.05.2018 21:00

конечно, но я хотел сохранить конфигурацию как можно более похожей на реальную. Будет ли приемлемой практикой создать поддельный файл style.js просто для импорта main.scss и css и использования его в качестве точки входа?

Carlo 23.05.2018 21:48

AFAIK, это не точка входа, которую нельзя использовать. В настоящее время документы webpack по-прежнему указывают на wp v3. twitter.com/wSokra/status/969678282085060608

Legends 23.05.2018 21:59

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

Carlo 24.05.2018 11:32

Объясните свою проблему здесь, они вам помогут

Legends 24.05.2018 13:50

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