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"
	
	#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. 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>