Я разработал приложение VueJs, используя stylus
и stylus-loader
. Для этого приложения я использую пользовательский интерфейс custom-theme .
Я импортирую зависимости в файл main.js
следующим образом.
import 'custom-theme';
import 'custom/dist/custom-theme.min.css';
Я получаю доступ к переменным этой темы в каждом из моих компонентов (Home.vue, Navbar.vue, Footer.vue
) вот так:
<style lang="stylus" scoped>
@import '../../node_modules/custom-theme/dist/helpers';
.title-text
color get-color('primary')
</style>
Я создал common.styl
в папке /src
, где я пишу общий css для всего приложения. но на этой странице @import '../../node_modules/custom-theme/dist/helpers';
не работает, даже если навигация правильная.
Я попытался импортировать это в main.js
, но это не работает. import 'custom-theme/dist/helpers.styl';
Я не уверен, как настроить этот helpers.styl
файл глобально в vue.config.js
файле: `
var path = require('path');
module.exports = {
loaders: [
{ test: /\.styl$/, loader: "stylus-loader" }
],
css: {
loaderOptions: {
stylus: {
import: [path.resolve(__dirname, "./node_modules/custom-theme/dist/helpers.styl")],
javascriptEnabled: true
}
}
}
};
`
Теперь я хочу импортировать это @import '../../node_modules/custom-theme/dist/helpers';
глобально вместо того, чтобы повторять его в нескольких компонентах.
Пожалуйста, помогите мне разобраться в этом вопросе.
Заранее спасибо ...