vue-cli构建的vue项目中引入stylus文件(转)

本文主要是介绍vue-cli构建的vue项目中引入stylus文件(转)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

 

使用教程

1 参考文献

2 使用stylus文件项目架构

3 安装stylus（使用npm安装stylus和stylus-loader一个都不能少）

4 ../build/webpack.base.conf.js 相关配置

5 我们将组合的样式汇集在index.styl中

6 在content.vue组件中使用

使用方法(@import)

直接在a.vue中的style模块中使用

遇到的问题

1 发现没有效果

2 快捷键自动排版之后报错

---

• 使用教程

1. 1 参考文献

• GitHub stylus-loader 
• GitHub stylus
• stylus中文版参考文档之综述
• vue-cli构建的vue项目中引入stylus文件
• 强大的css预编译stylus以及在vue中使用stylus

1. 2 使用stylus文件项目架构

1. 3 安装stylus（使用npm安装stylus和stylus-loader一个都不能少）

npm install stylus stylus-loader --save-dev

package.json结果:

     

1. 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')}},

 

1. 5 我们将组合的样式汇集在index.styl中

如图所示有commom文件夹下的styl只有一个variable.styl，则需要将它进入到index.styl中，然后在main.js中再引入index.styl文件；

// variable.styl文件// 颜色定义规范
$color-theme = #ffcd32//字体定义规范
$font-size-medium = 50px

     

     

1. 6 在content.vue组件中使用

<!-- content.vue -->
<template><div>大家好我是stylus使用</div>
</template><script>
</script><style scoped lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable.styl"#appcolor: $color-theme
</style>

• 使用方法(@import)

• 直接在a.vue中的style模块中使用

<style scoped lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable.styl"#appcolor: $color-theme
</style>

• 遇到的问题

1. 1 发现没有效果

一定要通过id关联起来

1. 2 快捷键自动排版之后报错

既然是报错我们补全就是

<style scoped lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable.styl"#app {font-size: $font-size-medium;/* 注意是；不是逗号哦！！ */color: $color-theme;}
</style>

 

这篇关于vue-cli构建的vue项目中引入stylus文件(转)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---