Package Exports

vue-cli-plugin-postcss-precss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-cli-plugin-postcss-precss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

vue create hello-world
cd hello-world
vue 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.

// const baseUrl = process.env.VUE_APP_BASE_URL;
module.exports = {
  "plugins": {
    'postcss-assets': {
      // "baseUrl": baseUrl, // default '/'
      "cachebuster": true,
      "loadPaths": ['public/']
    },
    "postcss-import": {},
    "postcss-extend-rule": {},
    "postcss-advanced-variables": {},
    "postcss-plugin-bem-atrule": {
      "defaultNamespace": "el",
      "style": "suit",
      "separators": {
        "descendent": "__",
        "modifier": "--"
      },
      "shortcuts": {
        "utility": "util",
        "component": "b",
        "modifier": "m",
        "descendent": "e"
      }
    },
    "postcss-preset-env": {
      "stage": 2
    },
    "postcss-atroot": {},
    "postcss-property-lookup": {},
    "postcss-nested": {},
    "postcss-nested-ancestors": {},
    "postcss-calc": {},
    "postcss-sass-color-functions": {},
    "lost": false,
    "postcss-utils": {}
  }
}