定制Vuetify主题不适用于Laravel

Question

我正在VueJS中构建一个API接口，同时在Laravel中构建Vuetify。根据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，但两者都没有工作.

我已经确保安装了整个手写插件之类的插件，在编译样式表时纱线根本不会抱怨(如果我故意导致错误，它也会这样做)。但是，编译后的样式表不包含已更改的主题变量。不过，我的习惯根本不适用。CSS文件不包含我的自定义颜色代码等等。

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

Answer 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.
      });

那么，什么改变了？

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

注意:您需要安装触笔加载器，因为Vuetify是在手写笔的基础上构建的。如果没有，在命令行中运行：

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

还请注意:您希望更改的手写笔变量的默认值必须在导入未通过变量列表之前声明，不过应该可以，但请从这个github页面variables.styl确认

应该没事的我相信