我正在使用vue-cli版本3.x。
我添加了一个vue.config.js文件:
const autoprefixer = require("autoprefixer");
const plugin = autoprefixer({ grid: true });
module.exports = {
configureWebpack: config => {
//get the index of the scss rule
let index = config.module.rules.findIndex(item => item.test.test("*.scss"));
const rule = config.module.rules[index];
//get the index of the postcss-loader config
let postCssIdx = rule.use.findIndex(
item => item.loader === "postcss-loader"
);
//add the autoprefixer plugin
config.module.rules[index].use[postCssIdx].options = {
...rule.use[postCssIdx].options,
plugins: [plugin]
};
}
};
但是虽然我在选项中设置了grid:true
,但网格属性没有前缀。
我缺少什么?
答案 0 :(得分:0)
最后得到它,我扩展的规则是外部scss文件的规则,但它不适用于.vue文件中的样式。
所以我需要更新vue-loader配置并在那里添加autoprefixer:
const autoprefixer = require("autoprefixer");
const plugin = autoprefixer({ grid: true });
module.exports = {
configureWebpack: config => {
//1. Define autoprefixer for external scss
//get the index of the scss rule
let index = config.module.rules.findIndex(item => item.test.test("*.scss"));
let rule = config.module.rules[index];
//get the index of the postcss-loader config
let postCssIdx = rule.use.findIndex(
item => item.loader === "postcss-loader"
);
const postcssOptions = rule.use[postCssIdx].options;
//add the autoprefixer plugin
config.module.rules[index].use[postCssIdx].options = {
...postcssOptions,
plugins: [plugin]
};
//2. Define autoprefixer for vue files
index = config.module.rules.findIndex(item => item.test.test("*.vue"));
rule = config.module.rules[index];
rule.use[0].options = {
...rule.use[0].options,
postcss: {
plugins: [plugin]
}
};
}
};