Я использую 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, воссоздающий проблему:
@Legends Я отредактировал свой вопрос, добавив ссылку на минимальный репозиторий github. Я включил весь каталог node_modules, так что простого запуска npm run build должно быть достаточно
Вы нашли решение? У меня такая же проблема.






Добавьте @import '~nouislider/distribute/nouislider.css'; в один из ваших файлов scss.
Нет необходимости использовать ProvidePlugin для импорта CSS.
Символ (~) указывает веб-пакету заглянуть в папку node_modules. Вы можете использовать этот метод для любых файлов css / scss из папки node_modules.
извините, возможно, я не совсем понял свой вопрос: плагин NoUiSlider импортируется с ProvidePlugin, файл nouislider.css импортируется внутри скрипта.
@Carlo import css с использованием вышеуказанного метода в одном из файлов ur scss
Я все равно попробовал ваш метод, но он не работает. С моей текущей конфигурацией webpack, импорт nouislider.css непосредственно в main.scss в любом случае генерирует два отдельных css
Обновлено:
Ты хочешь:
...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 во всех из них
Вы можете создать один файл main.scss и импортировать туда все файлы css и scss, которые вы хотите включить в него, и, наконец, импортировать только main.scss в свои входные сценарии. Вы можете оставить часть optimization, но для этого небольшого тестового репозитория она не нужна.
конечно, но я хотел сохранить конфигурацию как можно более похожей на реальную. Будет ли приемлемой практикой создать поддельный файл style.js просто для импорта main.scss и css и использования его в качестве точки входа?
AFAIK, это не точка входа, которую нельзя использовать. В настоящее время документы webpack по-прежнему указывают на wp v3. twitter.com/wSokra/status/969678282085060608
проблема, с которой я сталкиваюсь с этими решениями, заключается в том, что не очевидно, куда импортируется scss, и я не могу выбрать сгенерированное имя файла. Это не имеет большого значения, но странно, что у меня css назван как скрипт, даже если они вообще не связаны.
Объясните свою проблему здесь, они вам помогут
Создайте минимальный репозиторий git, который воспроизводит вашу проблему, чтобы мы могли взглянуть ...