Open wisetc opened 1 year ago
(issuer: 前端深坑之互不兼容,或中西技术/环境不兼容)
@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-exclude 来代替 postcss-px2rem, 这样就可以报错的 ant-design-vue这个库里面的代码排除出去了.
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".
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('/')如:
escape('/')
background: 12px 161px escape('/') 512px auto url(~/static/images/box-gray.png) no-repeat, linear-gradient(253.26deg, #f5f5f5 0%, #c4c4c4 100.01%);
参考:
(写作于 2021.10.21)
(issuer: 前端深坑之互不兼容,或中西技术/环境不兼容)
拟在项目中添加 vuetify 组件库
Vuetify 使用 rem, 导致的一个结果就是和其他的自定义的 rem 系统不兼容.
@nuxt/vuetify 和 postcss 不兼容.
@nuxt/vuetify 添加不上, 原因是它会和现有的 postcss 系统冲突. 导致 build 失败.
ant-design-vue 在nuxt中也不能和postcss 共存. 怀疑是postcss插件的原因.
可能的原因是px2rem的postcss的API没有及时更新导致![postcss-px2rem版本](https://user-images.githubusercontent.com/9448115/197348116-248035ef-a492-43e2-bfbb-e82ad070b791.png)
使用这个库
postcss-px2rem-exclude
来代替postcss-px2rem
, 这样就可以报错的ant-design-vue
这个库里面的代码排除出去了.用过 ant-design-vue 之后, 由于引用了它的样式, 原来的header标签的颜色也变了.
ant-design-vue 的编译build的版本可以使用
3.11.3
, 而不能使用4.1.2"
.否则会报这样的错误.
使用了 3.11.3, 但是下面的样式却不支持了.
于是得用到转义符号转义,
escape('/')
如:参考:
(写作于 2021.10.21)