前端深坑之组件互不兼容

(issuer: 前端深坑之互不兼容，或中西技术/环境不兼容)

拟在项目中添加 vuetify 组件库

Vuetify 使用 rem, 导致的一个结果就是和其他的自定义的 rem 系统不兼容.

@nuxt/vuetify 和 postcss 不兼容.

@nuxt/vuetify 添加不上, 原因是它会和现有的 postcss 系统冲突. 导致 build 失败.

 ERROR  in ../node_modules/vuetify/dist/vuetify.css                                            friendly-errors 10:54:14

Module build failed (from ../node_modules/postcss-loader/src/index.js):                        friendly-errors 10:54:14
TypeError: parent.before is not a function

ant-design-vue 在nuxt中也不能和postcss 共存. 怀疑是postcss插件的原因.

可能的原因是px2rem的postcss的API没有及时更新导致 postcss-px2rem版本

使用这个库 postcss-px2rem-exclude 来代替 postcss-px2rem, 这样就可以报错的 ant-design-vue这个库里面的代码排除出去了.

    postcss: {
      plugins: {
        'postcss-px2rem-exclude': {
          remUnit: 100,
          remPrecision: 2,
          exclude: /node_modules\/ant-design-vue/,
        },
      },
    },

用过 ant-design-vue 之后, 由于引用了它的样式, 原来的header标签的颜色也变了.

ant-design-vue 的编译build的版本可以使用 3.11.3, 而不能使用 4.1.2".

➜  bxh-vue-business git:(release) grep version node_modules/less/package.json 
  "version": "3.11.3",

否则会报这样的错误.

使用了 3.11.3, 但是下面的样式却不支持了.

background: 12px 161px / 512px auto url(~/static/images/box.png) no-repeat,
      linear-gradient(253.26deg, #a9e2c4 0%, #3a5a49 100.01%);

于是得用到转义符号转义, escape('/')如:

  background: 12px 161px escape('/') 512px auto url(~/static/images/box-gray.png) no-repeat,
    linear-gradient(253.26deg, #f5f5f5 0%, #c4c4c4 100.01%);

参考:

csdn

(写作于 2021.10.21)

wisetc / practice

前端深坑之组件互不兼容 #49

拟在项目中添加 vuetify 组件库

Vuetify 使用 rem, 导致的一个结果就是和其他的自定义的 rem 系统不兼容.

@nuxt/vuetify 和 postcss 不兼容.