webpack - webpack sass-loader 不会解析 url
问题描述
虽然 css 文件解析得很好,但在 scss 中它根本无法解析。有谁知道解决方案?Sass-loader 告诉我使用“resolve-url-loader”,但我无法让它工作。我试图添加字体真棒。如果我使用css版本它工作得很好(文件加载器甚至将字体复制到dist)但没有scss。
这是我的产品配置文件。
webpack.production.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const plugins = [
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: __dirname + '/../src/app/Views/layouts/layout-template.phtml',
filename: __dirname + '/../src/app/Views/layouts/layout.phtml'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].css',
}),
];
module.exports = () => ({
output: {
publicPath: '/dist/',
},
optimization: {
minimize: true,
minimizer: [new TerserJSPlugin({
terserOptions: {
extractComments: 'all',
compress: {
drop_console: true
}
}
}), new OptimizeCSSAssetsPlugin({})],
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader?',
'postcss-loader',
'resolve-url-loader',
'sass-loader'
],
}
]
},
plugins
});
提前致谢。干杯
解决方案
我想到了。我需要将'resolve-url-loader'的版本降低到2并将sourceMap添加到sass-loader。
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'postcss-loader',
'resolve-url-loader',
'sass-loader?sourceMap'
],
}
推荐阅读
- perl - 使用 perl 在所有文件中搜索和更新字符串
- .net - 通过 Microsoft Graph API 创建新的 AD B2C 用户
- android - 颤振语音识别语言环境de_DE不起作用
- json - 使用 json serde 在 hive 中加载 json 文件
- amazon-web-services - 最好扩展更少的大型实例还是更多的小型实例?
- ibm-mobilefirst - 问题 - 光标将焦点转移到基于 xcode 10.1 构建的 iOS 12 IPA 上的下一个文本框
- vb.net - 修改水晶报表中的参数值
- java - 如何从比屏幕大的视图的屏幕截图中创建位图?
- python - 为什么当我添加我用作参数的组时,由于 nonetype 没有属性而出现属性错误
- directus - 使用 git 升级 Directus 7 会导致使用时出错 - git pull origin