How to configure postcss? for a project created by vue-cli3.0 - Codes Helper - Programming Question Answer

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!

Vue.js vue-cli javascript

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
      }
    }
  }
}

Previous: Is Eleven and Twelve decimal?

Next: How iview table hides / shows an entire column under certain conditions

Vue uses routing on-demand loading, so why is the packaged app.js still so large?
as shown in the figure, I used routing on-demand loading and generated a lot of .js files, but the app.js is still very large. It is even larger than non-demand loading app.js ... ...

Vue.js vue-cli javascript

Mar.21,2021
Why has requestURL not changed since proxyTable configuration?
proxyTable: { levy : { target: http: 118.31.112.11 , changeOrigin: true } }, var obj = { username: , password: } this.$post( levy login index ,obj).then(res=>{ console.log(res); }) Why doesn t r...

Vue.js vue-cli javascript cross-domain

Mar.22,2021
How to view projects built by vue-cli on your mobile phone
has replaced localhost with local IP, and IP can be opened normally on PC, but the phone cannot be converted into a QR code or directly opened by a copy address browser. Is there anything else that needs to be configured? ...

Vue.js vue-cli javascript Mobile-web-develops

Mar.25,2021
Write limit input can only enter positive integer and decimal vue custom instructions, there are some problems, seek guidance to solve
only positive integers can be entered according to the keypress event, monitor the keyboard keyCode code, combined with the numeric regular expression to determine whether the typed keyCode is a number, if it is non-numeric, call the preventDefault e...

Vue.js vue-cli javascript

Jun.08,2021
Where is the process.env.BASE_URL set in vue-cli3?
when you create a template using cli3 (select vue-router), an environment variable of process.env.BASE_URL is used in router.js . I looked up the documentation for vue-cli3 environment variables and patterns , and found that you can only use envir...

Vue.js vue-cli javascript

Jun.23,2021
How to install vue-cli scaffolding tools offline?
at present, there is a need to build a development environment on private cloud, install vue-cli scaffolding, go through the major engines, but cannot find the offline installation method. I would like to ask which boss knows the solution to this. Thank ...

Vue.js vue-cli javascript

Mar.21,2022
Run serve error after vuecli created the project!
INFO Starting development server... ERROR Error: custom keyword definition is invalid: data.errors should be boolean Error: custom keyword definition is invalid: data.errors should be boolean at Ajv.addKeyword (C: Users Mi vue ebook node_mod...

Vue.js vue-cli javascript

Jun.13,2022

Menu