vue-cli 中这几处配置中使用postcss做了哪些事情?

cjwj
  • 628

webpack.base.conf.js 中的

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        css: ['vue-style-loader',
          { loader: 'css-loader', options: { sourceMap: false } }
        ],
        less: ['vue-style-loader',
          { loader: 'css-loader', options: { sourceMap: false } },
          { loader: 'less-loader', options: { sourceMap: false } }
        ],
        // 第 1 处
        postcss: ['vue-style-loader',
          { loader: 'css-loader', options: { sourceMap: false } }
        ],
      }
    },
    cssSourceMap: false,
    cacheBusting: true,
    transformToRequire: {
        video: ['src', 'poster'],
        source: 'src',
        img: 'src',
        image: 'xlink:href'
     }
},

webpack.dev.config.js

rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
          // 第 2 处
          { loader: 'postcss-loader', options: { sourceMap: true } }
        ]
      }
    ]

以上两处配置使用postcss分别做了什么?有什么区别?

还有:根目录下的.postcssrc.js是这两处的共用postcss配置吗,还是.....

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {}
  }
}
回复
阅读 4.5k
2 个回答
  1. 第一处是编译 .vue 格式文件里的 css;
  2. 第二处是编译 .css 格式文件里的css。

命中的文件不同,主要适配喜欢将样式写在.vue文件中和单独.css文件的开发者。
.postcssrc.js是插件配置文件吧,上面两条规则属于对webpack的集成。

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