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

stylus是css预处理器。还有另外两种css预处理器语言详解：less、sass。
不懂的可以先看一下这篇文章：stylus预处理入门
在vue项目引入stylus css预处理器，可以让我们的css也可以更加灵活。可以看一下图中的stylus 文件，以styl结尾。

image.png

在写基于vue-cli的vue项目时，如果直接引入styl文件，会报错，需要安装stylus、stylus-loader依赖以及别名配置。其实使用styl文件很简单，但是刚开始搞，还是会搞死人的。具体的步骤如下：

1 安装stylus、stylus-loader依赖

推荐cnpm，因为快。进入项目文件下，使用命令

cnpm install stylus stylus-loader

2 package.json文件配置

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

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

3 别名配置

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

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'src': resolve('src'),
      '@': resolve('src'),
      'common':resolve('src/common')
    }
  },

common :别名
'src/common' :styl路径

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

引入

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

image.png

index.styl

在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/variable.styl"
  #app
    color: $color-theme
</style>

小礼物走一走，来简书关注我

作者：布丁猫
链接：https://www.jianshu.com/p/62b4b93d4c97
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。