如何在Vuetify样式中使用手写笔块级导入 [英] How to use stylus block level import with Vuetify styles
问题描述
使用手写笔块级导入:
# vuetify-style.styl
.myapp
@import '~vuetify/src/stylus/main'
这是为了确保vuetify css不会干扰页面其他部分未使用vuetify的元素.
This is to ensure that the vuetify css doesn't interfere with elements from other parts of the page which aren't using vuetify.
但是不幸的是,它不起作用,我无法编译它.
But unfortunately it doesn't work, I can't compile it.
ERROR Failed to compile with 1 errors 2:13:28 pm
error in ./src/stylus/main.styl
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: node_modules/vuetify/src/stylus/settings/_el
evations.styl:85:33
81| 0px 9px 46px 8px $shadow-key-ambient-opacity
82|
83| // MIXINS
84| elevation($z, important = false)
85| box-shadow: $shadow-key-umbra[$z],
---------------------------------------^
86| $shadow-key-penumbra[$z],
87| $shadow-key-ambient[$z] (important ? !important : )
88|
cannot perform $shadow-key-umbra[((0))]
仅当我删除第一行(.myapp
)时才编译
It compiles only when I delete the first line (.myapp
)
链接到github上的问题: https://github.com/vuetifyjs/vuetify/问题/4864
Link to the issue on github: https://github.com/vuetifyjs/vuetify/issues/4864
顺便说一句,我还尝试使用less
并从包中导入css
BTW I also tried to use less
and import css from the package
# vuetify-style.less
vuetify-styles {
@import (less) 'vuetify/dist/vuetify.css';
}
但是这样我也遇到了一个错误:
But in this way I also got an error:
ERROR Failed to compile with 1 errors 11:57:30 AM
error in ./src/plugins/vuetify-styles.less
Module build failed:
// load the styles
var content = require("!!../../node_modules/css-loader/index.js??ref--9-1!../../node_modules/p
ostcss-loader/lib/index.js??ref--9-2!../../node_modules/less-loader/dist/cjs.js??ref--9-3!./vu
etify-styles.less");
^
Unrecognised input
in /Users/zvadym/WorkProjects/motos_as/odin/vue/src/plugins/vuetify-styles.less (line 4,
column 12)
@ ./src/plugins/vuetify-styles.less 4:14-334 13:3-17:5 14:22-342
@ ./src/plugins/vuetify.js
@ ./src/crm/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/crm/ma
in.js
推荐答案
找到了一种处理它的方法.实际上,我只是指定了样式文件的完整相对路径
Found a way to deal with it. Actually I just specified the full relative path to the style file
.vuetify-styles {
@import (less) '../../node_modules/vuetify/dist/vuetify.css';
}
并已安装less
当然是npm install -D less less-loader
这篇关于如何在Vuetify样式中使用手写笔块级导入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!