vue-cli3.0创建的项目怎么配置postcss?

Question

问题描述

我使用vue-cli 3.0版，创建了一个hello-world项目：

vue create hello-world
// 之后选择默认选项开始创建

我发现它使用：vue serve就开启了服务

现在我想加入 postcss，发现它生成的 pkg.json 里面已经写了这样的配置：

"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},

这不像我之前使用的 webpack 的配置方式。

请问现在我要加入postcss，需要怎样来配置它呢？
是否还是需要像原来的 webpack 的配置方式？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
这是创建好项目后的pkg.json内容：

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.9",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.9",
    "@vue/cli-service": "^3.0.0-rc.9",
    "vue-template-compiler": "^2.5.16"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

感谢！

Answer 1

已自行解决，关闭答案。

Answer 2

@kybetter 请问是如何解决的？ 遇到配置‘postcss-pxtorem’， 我写在vue.config.js中 不生效，问题基本和题主一样

css: {
    loaderOptions: {
        postcss: {
            'postcss-pxtorem': {
                 rootValue: 75
             },
            'postcss-theme-variables': {
                vars: {
                    white: '#000'
                },
                prefix: '$'
            }
        }
    }
}

Answer 3

请问如何postcss-viewport-units增加过滤器， "filterRule": rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1

Answer 4

在package.json中配置有效，亲测。

这是我配置的px转vw配置。

{
  "postcss": {
    "plugins": {
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
        "utf8": false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 375,
        "viewportHeight": 1334,
        "unitPrecision": 3,
        "viewportUnit": "vw",
        "selectorBlackList": [
          ".ignore",
          ".hairlines"
        ],
        "minPixelValue": 1,
        "mediaQuery": false
      },
      "cssnano": {
        "preset": "advanced",
        "autoprefixer": false,
        "postcss-zindex": true
      }
    }
  }
}