How to configure postcss? for a project created by vue-cli3.0

problem description

I created a hello-world project using vue-cli version 3.0:

vue create hello-world
// 

I found that it enabled the service

by using vue serve .

now I want to join postcss, and find that the pkg.json generated by it has already written this configuration:

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

this is not like the webpack configuration I used earlier.

how do I configure postcss, now if I want to join it? Does
still need to be configured in the same way as the original webpack?

related codes

/ / Please paste the code text below (do not replace the code with pictures)
this is the pkg.json content after the project is created:

{
  "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"
  ]
}

Thank you!

Jan.18,2022

@ kybetter, how is it solved? When it comes to the configuration 'postcss-pxtorem', it doesn't work when I write it in vue.config.js, and the problem is basically the same as the subject

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

has resolved itself. Close the answer.


how to add a filter to 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


the configuration in package.json is valid and tested in person.

this is the px to vw configuration that I configured.

{
  "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
      }
    }
  }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea2373-1bbf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea2373-1bbf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?