使用vue-cli搭建好vue项目后,如果直接引入styl文件,会报错,需要安装stylus、stylus-loader依赖以及别名配置。
具体的步骤如下:
第一步: 安装stylus、stylus-loader依赖
cnpm install stylus-loader css-loader style-loader --save-dev
第二步: 别名配置
打开build目录 build >webpack.base.conf.js
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'src': resolve('src'),
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'common':resolve('src/common')
}
},
注:
- common :别名
- 'src/common' :styl路径
第三步:在全局中引入
在main.js中引入 import 'common/stylus/index.styl'
第四步: 组件中引入
<style scoped lang="stylus">
@import "~common/stylus/variable.styl"
#app
color: $color-theme
</style>