Vue 安装依赖-stylus

本文主要是介绍Vue 安装依赖-stylus，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue-cli构建的vue项目引入stylus文件

1. 安装stylus、stylus-loadery依赖

npm install stylus stylus-loader

2. package.json文件配置
   上述命令并不会帮我们安装到配置文件，需要我们自己配置下，如下，添加上这两项配置

"devDependencies": {..."stylus": "^0.54.5","stylus-loader": "^3.0.2",...},

3. 别名配置
   配置别名为了在引用的时候，程序能够加载正确的路径。
   打开文件根目录下 build >webpack.base.conf.js

'@': resolve('src'),
'common': resolve('src/common'),

• common :别名
• ‘src/common’ :styl路径

这样我们就可以使用common引入sty文件了

引入

我们将组合的样式汇集在index.styl中
目录结构：

index.styl文件：

@import './mixin';
@import './icon';
@import './base';

在main.js中引入index.styl：

import Vue from 'vue';
import App from './App';
import router from './router';
import 'common/stylus/index.styl';

在组件中引入：

<style scoped lang="stylus">@import "common/stylus/mixin.styl"#appborder-1px(rgba(7,17,27,.1))
</style>

这篇关于Vue 安装依赖-stylus的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---