Как использовать импорт на уровне блоков стилуса со стилями Vuetify - PullRequest
Новая
       68

Как использовать импорт на уровне блоков стилуса со стилями Vuetify

0 голосов
/ 17 января 2019

Использование импорта на уровне блока стилуса: 

# vuetify-style.styl
.myapp
   @import '~vuetify/src/stylus/main'

Это сделано для того, чтобы vuetify css не мешал элементам из других частей страницы, которые не используют vuetify.

Но, к сожалению, это не работает, я не могу скомпилировать. 

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)

Ссылка на проблему на github: https://github.com/vuetifyjs/vuetify/issues/4864

Кстати, я также пытался использовать less и импортировать css из пакета 

# vuetify-style.less
vuetify-styles {
  @import (less) 'vuetify/dist/vuetify.css';
}

Но таким образом я также получил ошибку: 

 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

1 Ответ

0 голосов
/ 21 января 2019

Нашел способ с этим справиться. На самом деле я только что указал полный относительный путь к файлу стиля 

.vuetify-styles {
  @import (less) '../../node_modules/vuetify/dist/vuetify.css';
}

и установлено less конечно npm install -D less less-loader

...