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

时间:2019-02-04 13:21:24

标签: vuetify.js stylus laravel-mix

我正在Laravel软件包中与Vuetify一起在VueJS中构建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都设置为变量,但都没有起作用...

我已经确保安装了整个手写笔插件,这样,在编译样式表时yarn根本不会抱怨(如果我故意引起错误,它也会这样做)。但是,已编译的样式表不包含我更改的主题变量。不过,我的自定义设置根本不适用。 CSS文件不包含我的自定义颜色代码等。

有人知道为什么它不能正常工作吗?

1 个答案:

答案 0 :(得分:0)

我还使用Laravel,vue和vuetify框架,并且如果您了解设置,则覆盖默认vuetify变量的整个过程将非常容易,实际上,您似乎只会将其与许多不必要的配置复杂化。我宁愿使用npm而不是yarn,但这应该没有区别。 因此,我宁愿这样做: 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页面https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl

进行确认

我相信应该没事