webpack 4 SASS 问题
webpack 4 SASS issue
我有一个 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
之前,但如果我这样做,我会从 SCSS 文件中得到一堆未解析的字体和 img 错误。在使用 Mini 时,它无法编译,我得到一个...
const resource = this._identifier.split('!').pop();
^
TypeError: Cannot read property 'split' of undefined
没有它,文件会被监视但不会在任何地方编译。我只需要 SASS 来编译。求助!!!
我已经有一段时间了,我知道我 post 这个问题的那一刻,我会找到一个正确的组合。 css-loader
我需要几个额外的选项。 Found the solution here.
这个 webpack-config.js 对我有用(注意:我必须更改输出文件夹,所以 sass 没有在 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, 'assets')
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader',
options: { url: false, sourceMap: true }
},
'sass-loader'
]
},
]
}
};
我有一个 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
之前,但如果我这样做,我会从 SCSS 文件中得到一堆未解析的字体和 img 错误。在使用 Mini 时,它无法编译,我得到一个...
const resource = this._identifier.split('!').pop();
^
TypeError: Cannot read property 'split' of undefined
没有它,文件会被监视但不会在任何地方编译。我只需要 SASS 来编译。求助!!!
我已经有一段时间了,我知道我 post 这个问题的那一刻,我会找到一个正确的组合。 css-loader
我需要几个额外的选项。 Found the solution here.
这个 webpack-config.js 对我有用(注意:我必须更改输出文件夹,所以 sass 没有在 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, 'assets')
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader',
options: { url: false, sourceMap: true }
},
'sass-loader'
]
},
]
}
};