有赞vant组件库在vue-cli创建项目中自定义全局样式问题(修改var.css)

643104191
  • 422

前情提要

  • 设计稿样式和vant样式在颜色上有差异
  • 所以需要重定义vant的默认样式

目前做法

  • 文件目录结构
    clipboard.png
  • var.css内容(还没进行变量的定义,现在是直接把vant的代码copy过来的,想先测试下)
    clipboard.png
  • base.css内容
    clipboard.png
  • index.css内容
    clipboard.png

目前的问题

下面说的"css预处理语法"我也不太确定是什么,有点像sass/less,但是是css后缀名

我不熟悉less,只会点sass/stylus

  1. 由于文件是css格式的,但是似乎写的是"css预处理语法",所以在vscode里就飘了一片红(比如,var.css)
  2. 因为是css后缀,所以在webpack打包时不会用sass-loader之类的css预处理loader进行加载
  3. 最后导致样式不正常

所以目前我想问的问题是

  1. vant在vant\packages\vant-css\src里的css文件用的是什么预处理语法?less?sass?
  2. 如何配置webpack才能在main.js里对./assets/css/index.css进行import的时候能正常编译出css代码
    clipboard.png
回复
阅读 18.8k
3 个回答

vue-cli@3中处理全局SASS/SCSS变量的方法(亲测可用):
2020年9月6日 12:01:24

# 主流的两种方法 :
  • 使用 sass-resources-loader
  • vue.config.js 中配置 sass-loader

    // vue.config.js
    
    module.exports = {
      // sass-loader
      // https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass
      css: {
        loaderOptions: {
          sass: {
            // webpack.docschina.org/loaders/sass-loader/#options
            // webpack.docschina.org/loaders/sass-loader/#additionaldata
            // cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
            additionalData: '@import "~@/style/variables.scss";'
          }
        }
      },
    }
# 注意:
  • vue.config.js 中引入了 variables.scss 后,不要再在 main.js 中引入,否则报错SassError: An @import loop has been found:
# 参考:
宣传栏