У меня есть тема Wordpress, которую я переношу с gulp на webpack. У меня чертовски много времени, когда я не компилирую файлы SASS. Он отлично просматривает и компилирует файл JS, но файлы SASS не компилируются в CSS. Вот мой webpack-config.js
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ['./js/app.js', './sass/style.scss'],
plugins: [
new UglifyJSPlugin(),
new MiniCssExtractPlugin({
filename: 'style.min.css',
chunkFilename: "[name].css"
})
],
output: {
filename: 'app-compiled.min.js',
path: path.resolve(__dirname, 'js/assets')
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
'url-loader',
'css-loader',
'sass-loader'
]
},
]
}
};
Моя конечная цель - иметь css и js в отдельных файлах. Я думал, что optimization
должен был позаботиться об этом, но это не так. Из других форм плагин MiniCssExtractPlugin должен быть прямо перед css-loader
, но если я это сделаю, я получу кучу неразрешенных ошибок шрифта и img из файлов SCSS. При использовании Mini он не компилируется, и я получаю...
const resource = this._identifier.split('!').pop();
^
TypeError: Cannot read property 'split' of undefined
Без него файлы просматриваются, но никуда не компилируются. Мне просто нужен SASS для компиляции. Помощь!!!