vue的webpack 自动补全了css浏览器前缀?

大伯格
  • 371

用vue init webpack xxx 创建了一个目录
在App.vue文件里的 style里写了less代码,
问题是编译后的文件自动补全了浏览器前缀, 但是我没找到补全浏览器前缀的插件, 是谁帮我补全的前缀?
另一个问题是, 正确的找到这个问题答案的途径应该是什么?

#app .tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

clipboard.png

回复
阅读 8.5k
3 个回答
CRIMX
  • 9.1k
✓ 已被采纳

vue-cli 生成的项目里样式插件是自动插入的, 在 build/utils.js 里

autoprefixer 配置在 .postcssrc.js

去看一下postcss插件就知道了

cucumber_s_crown
  • 2
新手上路,请多包涵

如一楼所说,vue-cli的脚手架生成项目引用插件是自动插入的,一般都会在webpack.base.conf.js当中进行声明

Webpack.base.conf.js

var vueLoaderConfig = require('./vue-loader.conf')
...
rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
...

因此less部分配置的loader首先先要引用postcss-loader

      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader'
      },

之后再在vue-loader的loader当中配置postcss-loader的引用插件

vue-loader.conf

  options: {
    postcss: [require('autoprefixer')],
  }

这样,我们就可以直接在vue内部和外部引用相应的less文件了

而脚手架构建出来的样式引用配置一般都是在util文件下进行提供。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏