Vant: vue-cli 3.x 求一套开箱即用的配置

[skyshirt]

What problem does this feature solve?
升级到vue-cli 3.x，按官方配置，postcss precss3.x 不生效

Describe the solution you'd like
基于vue-cli 3.x 建立项目
precss
使用postcss-pxtorem转换rem单位
使用一个variables.css保存全局变量，每个.css和.vue都可以使用，不用@import
都需要哪些依赖
哪些文件里配置

Environment
Android > 4 / iOS >= 7
vue-cli 3.0.1
vant 1.3.0
precss 3.1.2

[Insua]

co-ask，我主要需求的是rem适配 vue cli 3.0配置 rem适配一直不成功

[qbob]

看这个能不能用的上 https://github.com/qbob/vue-startup

[skyshirt]

@qbob 十分感谢，但你的推荐并未解决我的问题

[Xujkstra]

@skyshirt 在vue.config.js里面配置css.loaderOptions设置

[skyshirt]

@Xujkstra 我试过，可是不生效，很苦恼，可以来一份配置好的代码吗

[js5323]

文档写的挺清楚的：
使用postcss-pxtorem转换rem单位的配置如下：

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    }
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

[skyshirt]

@js5323 非常感谢!

还请教这个配置怎样写呢
使用一个variables.css保存全局变量，每个.css和.vue都可以使用，不用@import

[js5323]

@skyshirt 配置写在项目根目录的 postcss.config.js
vue 文件中的样式和 import 进来的样式都能应用到

[skyshirt]

@js5323 感谢指导！
postcss 全局变量、主题、 pxtorem都搞定了
解决方法：
postcss.config.js

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, 'src/', dir)
}
const variables = require(resolve('assets/css/variables.js'))
const theme = require(resolve('assets/css/theme.js'))
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-extend-rule": {},
    "postcss-pxtorem": {
      rootValue: 37.5, // 默认根目录字体大小(px)
      propList: ['*'],
    },
    "postcss-theme-variables": {
      vars: theme,
      prefix: '$'
    },
    "postcss-advanced-variables": { 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": {},
    "postcss-utils": {}
  }
}

theme.js

module.exports = {
  'button-primary-background-color': '#000',
  'button-primary-border-color': '#000'
}

variables.js

module.exports = {
  colorPrimary: '#000'
}

main.js

import './assets/css/index.css'
import 'vant/packages/vant-css/src/base.css'
import { Button } from 'vant'
Vue.use(Button)

index.css

@import "./mixin.css";
@import "./reset.css";

.browserslistrc

Android >= 4.0
iOS >= 7

App.vue

<style lang="postcss">
#app {
  color: $colorPrimary;
}
</style>

开发依赖：
1、postcss-pxtorem 4.0.1
2、postcss-theme-variables 1.0.0
插件：
1、vue-cli-plugin-postcss-precss 1.0.0

Environment
vue-cli 3.0.1
vant 1.3.1

[Insua]

谢谢，我的问题也解决了

[skyshirt]

@Insua 学习了 😅