使用 VueRouter 之后， Vite 里面的 css preprocessorOptions 失效了，可能是什么原因？

This topic created in 1565 days ago, the information mentioned may be changed or developed.

使用 Vite+Vue3+VueRouter+TypeScript 开发

一开始的时候我没有引入 VueRouter

这时候我在 vite.config.ts 里面进行了 css 配置，重写了我 UI 框架的一些变量

这些重写都是有效的

  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'layout-header-background': '#FFFFFF',
          "tag-font-size": '8px',
        }
        ,
        javascriptEnabled: true
      }
    }
  },

但是引入 VueRouter 之后，这些配置就没用了，可能是什么原因？

Supplement 1 · Jan 28, 2022

我试了一下，如果我在单个 vue 组件里面，把<style></style>标签改成<style lang="less"></style>
然后里面写：

<style lang="less">
@import 'ant-design-vue/dist/antd.less';
</style>

那么在这单个组件内，就可以生效

问题是 vue router 到底破坏了什么，才导致现在这种状况？

1 replies • 2022-01-29 13:39:14 +08:00

1

silk

Jan 29, 2022

你使用 vite 进行项目管理的时候没有引入 antdv 的样式变量文件路由只是一个依赖不会影响吧...