问题描述
我的 scss 文件中有以下几行:
I have following lines in my scss files:
$google-fonts-url: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato:300';
@import url($google-fonts-url);
我的 output-css 中的第一行:
The first line in my output-css:
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato:300);@charset "UTF-8";
:root {
--blue: #007bff;
这是完全错误的.我不知道为什么,但是一旦我删除了导入语句,它就可以正常工作:
That is totally wrong. I have no idea why but as soon as I delete my Import-statement it works correctly:
@charset "UTF-8";
:root {
--blue: #007bff;
我的 webpack 配置:
my webpack-config:
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 时,它仍然是相同的行为.怎么了?我糊涂了.这是错误的顺序,但我找不到我的设置有什么问题.
When I remove Csso&CleanWebpack it's still the same behaviour. What's wrong? I'm confused. It's the wrong order but I can't find whats wrong with my settings.
版本:
节点:v8.9.4
extract-text-webpack-plugin: ^4.0.0-beta.0
extract-text-webpack-plugin: ^4.0.0-beta.0
webpack: ^4.28.3
webpack: ^4.28.3
webpack-cli: ^3.2.0
webpack-cli: ^3.2.0
css 加载器:^2.1.0
css-loader: ^2.1.0
文件加载器:^3.0.1
file-loader: ^3.0.1
有什么建议吗?我现在用谷歌搜索了几个小时:(
Any advice? I Googled for hours now :(
提前谢谢
为了澄清起见,我的字体导入不是 main-scss 文件中的第一行.来的很晚
for clarification, my font-import is not the first line in my main-scss file. It comes very late
推荐答案
我遇到了同样的问题,不是 Sass,而是 css-loader 的 import
选项.
I had the same issue, it's not Sass, it's css-loader's import
option.
导入
启用/禁用 @import at-rules 处理.控制@import 解析.@import 中的绝对 url 将在运行时代码中移动.
在 webpack.config 中将 'css-loader'
替换为 { loader: "css-loader", options: { import: false } }
将输出你的 cssat 规则以正确的顺序.
Replacing 'css-loader'
with { loader: "css-loader", options: { import: false } }
in webpack.config will output your css at-rules in the correct order.
我禁用了这个选项,因为 sass-loader 已经在处理我所有没有指向 url 的导入.
I disable this option since sass-loader is already handling all my imports which don't point to a url.
这篇关于Webpack SCSS @charset 和 @import 问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!