Заставить sass-loader изменять файлы css
Я пытаюсь настроить sass-loader, чтобы он переносил файлы .css, как если бы они были .scss. Однако он всегда просто выводит файлы css в том виде, в каком они есть.
Вот минимальная настройка:
package.json:
{
"dependencies": {
"css-loader": "^0.28.11",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"webpack": "^4.12.0",
"style-loader": "^0.21.0",
"webpack-cli": "^3.0.3",
"mini-css-extract-plugin": "^0.4.0"
}
}
webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: "./main.sass",
resolve: {
extensions: ['.sass', '.css'],
},
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.sass$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader?indentedSyntax",
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
]
},
],
},
};
a.fff (посмотрим, что будет, если sass-loader столкнется с неизвестным расширением):
.black {
background-color: black
}
b.css:
.red {
background-color: red
}
main.sass:
body
@import "./a.fff"
@import "./b.css"
ОК. Теперь запустим node ./node_modules/webpack/bin/webpack.js и проверим dist / main.css:
.red {
background-color: red
}
body { }
body .black {
background-color: black; }
Как видите, a.fff был перенесен правильно, но css был просто вставлен как есть. Я хочу получить это:
body { }
body .black {
background-color: black; }
body .red {
background-color: red; }
Есть ли способ заставить sass-loader угрожать файлам .css как .scss?
Хотел бы я, чтобы не тратить так много времени, проблема в том, что файлы css находятся в сторонней библиотеке, например, здесь github.com/isagalaev/highlight.js/tree/master/src/styles
Да, но если сделать это в загрузчике, это может выглядеть как { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "sass-loader", {loader: "rename-loader", options{filename:"[name].scss'}} ] },, это всего лишь предположение, но это очень маленький загрузчик, поэтому мне интересно, насколько сложно его настроить.
Я уже пробовал это и привел в пример выше, это не сработало :( Идея переименования блестящая. Думаю, я мог бы сделать как @import 'runTimefile.scss' в коде и добавить что-то вроде CopyFileWebpackPlugin('old.css', 'runTimefile.scss'). У вас есть какие-нибудь наброски для этого?
Ответы 2
Вы можете попробовать следующее, потому что это то, что я использую, и я думаю, это дает результат, который вы ищете. Однако я использую scss вместо sass:
test: /\.sass$/,
use: [
MiniCSSExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production'
}
},
'sass-loader'
]
plugins: [
new MiniCSSExtractPlugin( {
filename: 'dist/css/[name].css' // Specify output path and file name
})
Команда:
"dev": "./node_modules/.bin/webpack --config webpack.config.js --mode=development -w",
Если я укажу любое имя файла, но .css при импорте, он будет правильно преобразован, см. .a.fff в моем примере. Проблема в том, что я импортирую css из сторонней библиотеки, в ней нет файлов .scss. Я не понимаю, чем ваш код отличается от моего.
Возможно, вы можете импортировать файлы до body и просто расширить классы внутри тела.
Хорошая идея, но я не знаю, какие классы перечислены в сторонней библиотеке (я имею в виду, что это может быть .red, это может быть .cyan), есть ли способ обойти неизвестные классы?
Сторонняя библиотека - это то, что вы включаете по прямому URL-адресу, или это файл, который вы загрузили. Если вы уже загрузили библиотеку, вы можете просто переименовать ее в _b.scss, чтобы она была частичной. Тогда должно работать: stackoverflow.com/questions/24307455/…
Вы хотите скопировать файлы с node_modules в исходные каталоги? Я бы хотел этого избежать.
Я понимаю, что вы хотите избежать этого, но это был вариант в зависимости от типа библиотеки третьей части.
Хорошо, вам понравится этот ответ ...
body
@import "./a.fff"
@import "./b"
Да, отсутствие расширения разрешит ./b.css И обработает его как синтаксис scss. Пришлите мне свою зарплату. ;)
Бонусные мелочи:
Ваше второе правило test: /\.css$/, никогда ничего не поймает, потому что @imports полностью обрабатываются sass-loader / node-sass, поэтому webpack никогда не задействуется после срабатывания первого правила sass.
Я думаю, что различные расширения довольно жестко запрограммированы в sass-loader: как здесь Может быть, вы могли бы просто переименовать их в .scss прямо в конвейере загрузчика, а затем передать их в sass-loader?