我正在使用Webpack编译Sass,但PostCSS自动添加前缀无法作用于被引入到style.scss
入口点的局部文件。
直接将样式添加到style.scss
中的样式可以正常添加前缀,但是任何作为@import
引用的文件都没有被自动添加前缀。
我已经提供了参考的webpack.config、postcss.config和style.scss如下。
webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: ['./src/js/index.js', './src/scss/style.scss'],
output: {
filename: './js/bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: './dist/'
},
watch: true,
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {}
}
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader', 'postcss-loader']
}),
exclude: /node_modules/,
}
]},
plugins: [
new ExtractTextPlugin({ filename: './css/style.css' })
]
};
postcss.config.js
module.exports = {
map: false,
plugins: {
'autoprefixer': {browsers: ['last 2 versions', '> 5%']},
}
}
style.scss
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import 'partials/admin';
@import 'partials/nav';
@import 'partials/photos';
@import 'partials/no-results';
.test{
display: flex; // <- This is being prefixed as expected.
}
我是否错过了某种特殊的加载器或语法来获取自动添加前缀的 @import
文件?
* 编辑 *
我通过调整 scss 加载器的顺序解决了这个问题。
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'sass-loader',
options: {
outputStyle: 'expanded'
},
}
]
}),
exclude: /node_modules/,
}