Webpack 网页包SCSS@charset和@import问题
我的scss文件中有以下行:Webpack 网页包SCSS@charset和@import问题,webpack,Webpack,我的scss文件中有以下行: $google-fonts-url: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato:300'; @import url($google-fonts-url); 输出css中的第一行: @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato:300);@charset "UTF-8"; :root {
$google-fonts-url: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato:300';
@import url($google-fonts-url);
输出css中的第一行:
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato:300);@charset "UTF-8";
:root {
--blue: #007bff;
这是完全错误的。我不知道为什么,但一旦我删除导入语句,它就会正常工作:
@charset "UTF-8";
:root {
--blue: #007bff;
我的网页包配置:
module.exports = {
entry: {
app: './src/app.scss'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].css'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader', 'sass-loader']
})
//['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg|gif|jpg|jpeg|png)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new CleanWebpackPlugin('dist'),
new ExtractTextPlugin({
filename: '[name].css'
}),
new CssoWebpackPlugin({
pluginOutputPostfix: 'min'
})
]
}
当我删除Csso和CleanWebpack时,它仍然是相同的行为。发生了什么?我很困惑。顺序不对,但我找不到我的设置有什么问题
版本:
节点:v8.9.4
提取文本网页包插件:^4.0.0-beta.0
网页:^4.28.3
网页包cli:^3.2.0
css加载程序:^2.1.0
文件加载器:^3.0.1
有什么建议吗?我在谷歌上搜索了几个小时:(
提前Thx
编辑:为了澄清,我的字体导入不是我的主scss文件的第一行。它来得很晚我也有同样的问题,不是Sass,而是选项
导入
在规则处理时启用/禁用@import。控制@import解析。将在运行时代码中移动@import中的绝对URL 将webpack.config中的
'css-loader'
替换为{loader:“css-loader”,选项:{import:false}}
将按正确顺序在规则中输出css
我禁用此选项,因为sass loader已经在处理我所有不指向url的导入