定制主题没效果 - Githubissues

Mrava commented 6 years ago

按照配置，配置完成之后运行也没有报错，更改覆盖变量之后运行没效果，这个能够提供一个demo程序吗？

Mrava commented 6 years ago

main.js

import Vue from 'vue';
import App from './App.vue';

// 引入基础样式
import 'vant/packages/vant-css/src/base.css';

// 引入组件对应的样式
import 'vant/packages/vant-css/src/button.css';
// import 'vant/packages/vant-css/src/checkbox.css';

new Vue({
  el: '#app',
  render: h => h(App)
});

.postcssrc.js

module.exports = {
  plugins: [
    require('postcss-easy-import')({
      extensions: ['pcss', 'css']
    }),
    require('postcss-theme-variables')({
      vars: {
        red: '#03A9F4',
        gray: '#CCC',
        blue: '#03A9F4'
      },
      prefix: '$'
    }),
    require('precss')(),
    require('postcss-calc')(),
    require('autoprefixer')({
      browsers: ['Android >= 4.0', 'iOS >= 7']
    })
  ]
};

vue

<template>
  <div id="app">
    <van-cell-group class="item-list">
      <van-cell is-link icon="points" title="我的积分"/>
      <van-cell is-link icon="gift" title="我收到的礼物"/>
    </van-cell-group>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

<script>
  import {Button, Cell, CellGroup, Icon} from 'vant';

  export default {
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Icon.name]: Icon,
      [Button.name]: Button,
    }
  };
</script>

<style>
  body {
    background-color: #f8f8f8;
  }

  .van-cell__title .van-icon {
    font-size: 18px;
  }

</style>

pylee commented 6 years ago

同样的操作，也是没有效果，也有没编译错误，是不是使用姿势不对啊？

chenjiahan commented 6 years ago

后续会改善一下定制主题的使用姿势

xdliuyong commented 6 years ago

遇到同样的问题，没报错，运行后没效果。

xdliuyong commented 6 years ago

.postcssrc.js


module.exports = {
  "plugins": {
    "postcss-easy-import": {
      "extensions": ['pcss', 'css']
    },
    "postcss-theme-variables": {
      vars: {
        red: '#F60',
        gray: '#CCC',
        blue: '#03A9F4',
        green: '#057BDD'
      },
      prefix: '$'
    },
    "precss": {},
    "postcss-calc": {},
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    }
  }
}

GodStream commented 6 years ago

其实可以参考一下element ui 的定制主题的使用方式，我觉得还是比较方便的

xdliuyong commented 6 years ago

现在我是写了个自定义的css文件，然后在main.js中import，目前只能用这种方式来进行局部样式优化了。

chenjiahan commented 6 years ago

@bjsteven

项目维护者的精力是有限的，没有义务去满足所有人的需求。有想法随时可以提 PR
按照文档进行定制主题是完全可用的
维护开源项目是没有任何报酬的，不存在对不起起谁的说法

nailuoGG commented 6 years ago

要到var.css 里去找对应的变量，得翻一下源码才知道某个样式用了哪个变量，再去postcss.js里改

我用下面的配置改了tabbar的选中颜色

main.js

import { Tabbar, TabbarItem } from 'vant'

import 'vant/packages/vant-css/src/tabbar.css'

Vue.use(Tabbar).use(TabbarItem)

.postcssrc.js：

module.exports = {
  'plugins': {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-theme-variables': {
      vars: {
        red: '#F60',
        gray: '#CCC',
        blue: '#e84560',
        'background-color': '#e84560'
      },
      prefix: '$'
    },
    'precss': {},
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'],
      selectorBlackList: [/^\.van-/, /^\.weui/, /^\.mint/]
    }
  }
}

xwei111 commented 6 years ago

有没有解决的方案现在

86driver commented 5 years ago

我修改var.css的变量都没生效，。。我现在使用的办法是新建一个css文件，然后到页面去查看组件具体引用的哪个类的样式，然后进行覆盖 - -

youzan / vant

定制主题没效果 #965

main.js

.postcssrc.js

vue