您如何将 scss 模板应用于 vuetify？

Posted 2023-02-23

【中文标题】您如何将 scss 模板应用于 vuetify？

【英文标题】：How do you apply an scss template to vuetify?

【发布时间】：2020-08-14 00:21:35

【问题描述】：

Vuetify 似乎定义了它的默认深色主题 here，我想用自定义颜色覆盖其中的一些值。

似乎 scss 是覆盖它的方法。但是，当我尝试更改背景颜色时，我看不到任何变化。

@import '~vuetify/src/styles/main.sass';

$material-dark: () !default;
$material-dark: map-deep-merge(
  (
    'background': #FFFF00
  ),
  $material-dark
);

我在 main.js (import "./example.scss") 中导入它，我知道它正在加载（语法错误导致它崩溃），但深色主题背景没有改变。如果这不是 vuetify 样式的工作方式，那是什么？

【参考方案1】：

对于vue-cli，scss样式必须包含在vue.config.js中，即。

module.exports = 
  "configureWebpack": 
  ,
  "css": 
    "loaderOptions": 
      "sass": 
        "prependData": `@import "~@/styles/main.scss"` // change the route with you main.scss location in yout proyect
      
    
  ,
  "lintOnSave": false,
  "transpileDependencies": [
    "vuetify"
  ],
  "publicPath": ".",

另外，scss 文件应该导入 styles.sass 而不是 main.sass。即。

@import '~vuetify/src/styles/styles.sass';