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

Question

前情提要

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

目前做法

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

目前的问题

下面说的"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代码
   

Answer 1

https://www.youzanyun.com/zan...
官方文档给出了配置方法 感觉第一种好点
感觉如果设计稿和vant的风格差别大的话 不太适合

Answer 2

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:

# 参考：

• 向预处理器 Loader 传递选项
• 在实际的文件之前添加 Sass / SCSS 代码

Answer 3

是postcss