自定义 Vuetify 主题不适用于 Laravel Mix答案

【问题标题】：Customizing Vuetify theme doesn't work with Laravel Mix自定义 Vuetify 主题不适用于 Laravel Mix
【发布时间】：2019-06-28 05:56:18
【问题描述】：

我正在 VueJS 和 Laravel 包中的 Vuetify 中构建 API 接口。根据 Vuetify 文档，我创建了一个 main.styl 文件，其中包含主题手写笔文件 (~vuetify/src/stylus/theme)、我的覆盖和应用程序文件的包含 (~vuetify/src/stylus/main.styl)。这应该添加我的颜色覆盖，但是这不会发生。

手写笔文件如下：

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import "~vuetify/src/stylus/theme"

$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a

@import '~vuetify/src/stylus/main'

我的webpack.mix.js 是这样的：

const path = require('path')
const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

mix.setPublicPath(path.normalize('public'))

mix.webpackConfig({
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: 'vendor/my-package-name/'
  },
  plugins: [
    new VuetifyLoaderPlugin()
  ],
  resolve: { ... }
})

mix.stylus('resources/stylus/vuetify.styl', 'public/css')
mix.js('resources/js/app.js', 'public/js/app.js')

我也尝试将（在示例中设置为）$material-theme 变量设置为$material-dark 和$theme，但都没有工作...

我已经确保安装了整个 stylus 插件等，并且在编译样式表时，yarn 完全不会抱怨（如果我故意导致错误也会抱怨）。但是编译的样式表不包含我更改的主题变量。不过，我的定制根本不适用。 CSS 文件不包含我的自定义颜色代码等。

有人知道为什么这不能正常工作吗？

【问题讨论】：

标签： vuetify.js stylus laravel-mix

【解决方案1】：

我还使用 Laravel、vue 和 vuetify 框架，如果您了解设置，则覆盖默认 vuetify 变量的整个过程非常容易，实际上您似乎只是通过许多不必要的配置使其复杂化。我宁愿使用 npm 而不是纱线，但这应该没有什么区别。所以，我宁愿这样做： main.styl 文件看起来像：

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a

@import "~vuetify/src/stylus/theme"    
@import '~vuetify/src/stylus/main'

这是我自己的webpack.min.js不知道为什么你有多余的配置！

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/main.scss', 'public/css')
   .stylus('resources/stylus/main.styl', 'public/css');

要防止 Vuetify 编写可能覆盖 main.css 的内联样式，请执行以下操作：

 mix.options({
      extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
      });

那么，发生了什么变化？

您说您创建了 main.style 文件，但是您正在从 webpack.mix.js 将 vuetify.styl 文件编译到您的 css 中。
您的 main.styl 文件应保存在路径 resources/stylus/main.styl

注意：你需要设置 stylus-loader，因为 Vuetify 是建立在 stylus 之上的。如果还没有，请在命令行中运行：

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

另请注意：您希望更改的触控笔变量的默认值必须在导入之前声明没有检查你的变量列表，应该没问题，但从这个 github 页面确认https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl

我相信应该没问题

【讨论】：