vue-cli-plugin-postcss-precss

Vue CLI 3.x plugin for Postcss. Allow you to use Sass-like markup in your CSS.

Install

First you need to install @vue/cli globally.

Then create a project add add the postcss-precss plugin:

1vue create hello-world
2cd hello-world
3vue add postcss-precss

You'll be asked some questions regarding how the PostCss Precss configured in your project. After that, you're good to go.

postcss-preset-env will be default add, so autoprefixer will be removed from postcss.config.js. Here also a lot of plugins will be configured.

1// const baseUrl = process.env.VUE_APP_BASE_URL;
2module.exports = {
3  "plugins": {
4    'postcss-assets': {
5      // "baseUrl": baseUrl, // default '/'
6      "cachebuster": true,
7      "loadPaths": ['public/']
8    },
9    "postcss-import": {},
10    "postcss-extend-rule": {},
11    "postcss-advanced-variables": {},
12    "postcss-plugin-bem-atrule": {
13      "defaultNamespace": "el",
14      "style": "suit",
15      "separators": {
16        "descendent": "__",
17        "modifier": "--"
18      },
19      "shortcuts": {
20        "utility": "util",
21        "component": "b",
22        "modifier": "m",
23        "descendent": "e"
24      }
25    },
26    "postcss-preset-env": {
27      "stage": 2
28    },
29    "postcss-atroot": {},
30    "postcss-property-lookup": {},
31    "postcss-nested": {},
32    "postcss-nested-ancestors": {},
33    "postcss-calc": {},
34    "postcss-sass-color-functions": {},
35    "lost": false,
36    "postcss-utils": {}
37  }
38}