在Laravel项目中自定义Vuetify的Sass变量不生效该如何解决？

修复步骤 #

• 移除vuetify.js中预编译样式的引入代码
  你当前直接引入了vuetify/dist/vuetify.min.css，该文件是已经编译完成的固定样式，不会响应sass变量的修改，直接删除该行即可。
• 调整webpack.mix.js配置，指定自定义sass变量路径
  你使用的vuetifyjs-mix-extension扩展支持注入自定义变量，修改配置如下：

  const mix = require("laravel-mix");
  require("vuetifyjs-mix-extension");
  mix.js("resources/js/app.js", "public/js")
      .vuetify('vuetify-loader', {
          customVariables: ['resources/sass/variables.scss']
      })
      .vue({ version: 2 })
      .sass("resources/sass/app.scss", "public/css");
  

• 修改app.scss中的本地sass导入语法
  @import url()是用来加载外部CSS/网络资源的语法，本地sass文件导入直接使用标准sass导入规则即可：

  // Fonts
  @import url("https://fonts.googleapis.com/css?family=Nunito");
  // Variables
  @import "variables.scss";
  

• 移除variables.scss中不必要的!important标识
  sass变量是编译阶段生效的，!important是CSS运行时的优先级规则，对sass变量覆盖无效，修改为：

  $border-radius-root: 14px;
  

• 清理旧缓存重新编译
  删除node_modules/.cache目录，之后执行npm run dev重新编译项目即可生效。

内容的提问来源于stack exchange，提问作者Musawer Shah