webpack 覆盖vuetify中的scss变量

ifmq2ha2 于 2023-10-19 发布在 Webpack

关注(0)|答案(2)|浏览(165)

为了增加vuetify的v-switch的宽度，我想修改vuetify的scss变量的值。
vuetify是通过vue-configuration配置的，开发的代码如下。

// src/assets/css/overrides.scss
$font-size-root: 24px;
$switch-width: 400px;
$switch-track-width: 400px;

// vue.config.js
module.exports = {
  transpileDependencies: ['vuetify'],
  configureWebpack: {
    devtool: 'source-map',
  },
  css: {
    loaderOptions: {
      scss: { // 8.0.3
        prependData: `@import "@/assets/css/overrides.scss";`,
      },
    },
  },
};

但一切都没有改变。我在做什么蠢事？
参考：https://vuetifyjs.com/en/customization/sass-variables/ https://cli.vuejs.org/guide/css.html#css-modules

webpack

来源：https://stackoverflow.com/questions/63887936/override-scss-variables-in-vuetify

2条答案

按热度按时间

uqxowvwt1#

我在这个问题上浪费了很多时间。但后来，我意识到这很容易。您不需要导入文件或在vuetify.config.js中写入loaderOptions。
1.在src文件夹中，创建一个scss文件夹
1.在新的src/scss文件夹中，创建variables.scss文件

📁 src
├─ 📁 scss
|  └─ 📄 variables.scss
...

vuetify-loader将自动引导您的变量到Vue CLI的编译过程中，恢复框架的默认值。* 根据本文件 *

示例

// projectRoot/src/scss/variables.scss
$font-size-root: 24px;
$switch-width: 400px;
$switch-track-width: 400px;

完成所有这些操作后，停止本地服务器，并仅使用npm或yarn重新启动一次。完成这些步骤后，您所做的所有更改都会自动显示。所以你不需要每次修改都重新启动开发服务器。

展开查看全部

赞(0）回复(0）举报 2023-10-19

btxsgosb2#

这在Veutify 3上适用：

步骤1：安装webpack-plugin-vuetify或vite-plugin-vuetify，然后在配置中启用。
步骤2：在您的vite.config.ts上添加

vuetify({ autoImport: true, styles: { configFile: 'src/scss/settings.scss' } }),

第三步：在'src/scss'上创建settings.scss文件
第四步：settings.scss添加设置示例：

@use 'vuetify/settings' with (
    $expansion-panel-text-padding: 0px,
);

如果没有反映更改，则重新启动npm / clear浏览器

赞(0）回复(0）举报 2023-10-19

我来回答

webpack 覆盖vuetify中的scss变量

2条答案

相关问题

热门标签

最新问答