我有Vuetify 2.2.11,我试图覆盖他们的SASS变量。我在一个Symfony 3.x项目中,所以我没有安装Vuetify与vue-cli。我按照Webpack安装指南,但我似乎不能使它工作。Vuetify样式被转储到一个css文件(它是以我的js命名的:app.js
-〉app.css
),但我的覆盖没有被考虑。至于我的项目样式(company.scss
),它们被注入到html的<style type="text/css">
标签中。还有一大堆空的<style type="text/css"></style>
标签,我猜这些标签来自每个Vuetify组件,但我不知道为什么它们是空的。
下面是我的代码:
第一个问题:
4条答案
按热度按时间fquxozlt1#
好吧,我终于让它工作了。这是如何:
webpack.config.js
:这里你所需要做的就是
.enableSassLoader()
.config选项在这里描述,实际加载的地方,但是变量声明没有效果。app.js
只需包括您的样式:
variables.scss
我已经创建了这个文件,并将所有vuetify特定的变量移到了那里。
company.scss
这就是诀窍:
就是这样。
我注意到热重载不适用于变量的改变。但是只要这些变量有效就行了。我从这个页面得到了关于颜色包的提示
tktrz96b2#
ferdynator的解决方案很好很干净,但是在我的例子中,它只允许我覆盖几个变量。对我来说,它对组件中使用的变量没有影响。实际上,您可能仍然需要像www.example.com中所描述的那样追加
variables.scss
https://vuetifyjs.com/en/features/sass-variables/#webpack-install使用Webpack Encore执行此操作可能会非常混乱:因为
.enableSassLoader()
已经有了一个/\.s[c|a]ss$/
的规则,您不想再乱碰它(除非您知道自己在做什么,不像我:p)。这使事情变得复杂,因为您需要Vuetify记录的不同的sass和scss规则。如果您只使用sass,则以下内容就足够了:
(Note
additionalData
适用于sass版本9以上。对于较早的版本,您可能需要prependData
或data
),如果您使用scss,那么您需要拆分
enableSassLoader
添加的规则。我可以通过在webpack.config.js
中添加以下代码来使其工作:我发现对这段代码的需要是可怕的,我希望看到一个更干净的解决方案,但至少这允许您覆盖变量。
ukqbszuj3#
经过许多问题,我解决了这个在Laravel 8.
第一个问题
gojuced74#
一个更简单的解决方案是使用Laravel混合扩展
您可以像这样简单地为your _variable.scss添加一个路径
以下是https://laravel-mix.com/extensions/vuetifyjs的完整文档