我的scss文件中有以下几行:
$google-fonts-url: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato:300';
@import url($google-fonts-url);
output-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;
我的webpack配置:
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
extract-text-webpack-plugin:^ 4.0.0-beta.0
webpack:^ 4.28.3
webpack-cli:^ 3.2.0
css-loader:^ 2.1.0
文件加载器:^ 3.0.1
有什么建议吗?我现在用Google搜索了几个小时:(
提前谢谢
编辑:为澄清起见,我的字体导入不是我的main-scss文件中的第一行。很晚了
答案 0 :(得分:0)
我遇到了同样的问题,它不是Sass,是css-loader's import
选项。
import
启用/禁用@import规则处理。控制@import解析。 @import中的绝对URL将在运行时代码中移动。
在webpack.config中用'css-loader'
替换{ loader: "css-loader", options: { import: false } }
会以正确的顺序输出css规则。
我禁用了此选项,因为 sass-loader 已经在处理我所有未指向url的导入。