目录
3 安装stylus(使用npm安装stylus和stylus-loader一个都不能少)
4 ../build/webpack.base.conf.js 相关配置
-
使用教程
-
1 参考文献
- GitHub stylus-loader
- GitHub stylus
- stylus中文版参考文档之综述
- vue-cli构建的vue项目中引入stylus文件
- 强大的css预编译stylus以及在vue中使用stylus
-
2 使用stylus文件项目架构
-
3 安装stylus(使用npm安装stylus和stylus-loader一个都不能少)
npm install stylus stylus-loader --save-dev
package.json结果:
-
4 ../build/webpack.base.conf.js 相关配置
- common :别名
- 'src/common' :styl路径
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'src': resolve('src'),
'@': resolve('src'),
'common':resolve('src/common')
}
},
-
5 我们将组合的样式汇集在index.styl中
如图所示有commom文件夹下的styl只有一个variable.styl,则需要将它进入到index.styl中,然后在main.js中再引入index.styl文件;
// variable.styl文件
// 颜色定义规范
$color-theme = #ffcd32
//字体定义规范
$font-size-medium = 50px
-
6 在content.vue组件中使用
<!-- content.vue -->
<template>
<div>
大家好我是stylus使用
</div>
</template>
<script>
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable.styl"
#app
color: $color-theme
</style>
-
使用方法(@import)
-
直接在a.vue中的style模块中使用
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable.styl"
#app
color: $color-theme
</style>
-
遇到的问题
-
1 发现没有效果
一定要通过id关联起来
-
2 快捷键自动排版之后报错
既然是报错我们补全就是
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable.styl"
#app {
font-size: $font-size-medium;/* 注意是;不是逗号哦!! */
color: $color-theme;
}
</style>