vue组件中使用postcss并用webpack打包

Question

题目描述

在vue的组件中的样式使用postcss，但在自己配置的webpack进行打包的时候，发现嵌套的样式不能被识别，导致部分样式失效

相关代码

vue组件代码：

<template>
    <div class="blank-img-con">
        <div class="blank-img"></div>
    </div>
</template>

...

<style lang="postcss" scoped>
.blank-img-con{
    .blank-img{
        ...
    }
}
</style>

webpack.config.js代码：

const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader']
      },
      {
        test:/\.pcss$/,
        use:[
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [require('autoprefixer')]
              }
            }  
        ]
      },
      {
        test:/\.(gif|png|jpg|woff|svg|eot|ttf)/,
        use:[
            {
                loader:'url-loader',
                options: {
                    limit: 8192
                }
            }
        ],
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  resolve: {
    extensions: ['.vue','.js'],
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    port: 9000
  }
};

打包后，发现只有.blank-img-con的样式被识别了，但是.blank-img没有。

应该怎么做才能正常打包，另外刚学webpack，有关webpack配置上有问题的地方麻烦指出来一下

Answer 1

题主要先了解postcss并不像sass和less那样是个css预处理器。它可以理解为一个平台或一组API，支持使用js转换css。它本身是使用普通css规则来写样式，没有任何css标准之外的书写方式。它的强大之处在于方便我们自己扩展任何写法，因为我们可以用js来实现解析，这一些解析方法就来源于postcss提供的API，而他也可以去加载在他之上扩展的js插件组合解析。比如要用它实现像嵌套这类的便捷语法，可以使用postcss-nested这样的插件把它解析成合法的css规则，说到底使用它主要还是为了偷懒，少些代码。

你的配置里就加入了autoprefixer这个插件，同理，你要想实现其他的便捷书写方式，可以在这之后继续添加其他插件。

{
    test:/\.pcss$/,
    use:[
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [require('autoprefixer')]
          }
        }  
    ]
  }

要注意的是postcss的插件的添加顺序是由要求的，这些要求在那些比较正规的插件的github首页都有写明，另外很多插件都是开发者自己提供的，所以同一种功能可能会有好几个人提供了插件，质量也不一定能保证，在选择上会有一定困难。所以出现了一些专门提供打包好的插件的组合的插件包，其中也已经配置好了顺序，使用的时候只要加载一个插件包就可以实现很多效果，比如楼上所说的postcss-cssnext，另外比较早的还有rucksack。

Answer 2

需要配置postcss的插件吧postcss-cssnext