欢迎光临
我们一直在努力

vue-cli环境中使用内部样式表import导入外部styl文件或css文件,vue-cli目录别名设置

vue开发过程中如果使用内部样式表时,需要用import导入外部cssstyl文件,

其引入方法分别为:

<style scoped>
    @import url('../../assets/reset.css');
</style>
<style lang="stylus" scoped>
    @import '~@/assets/varibles.styl'
</style>

注:其中@为根目录的别名,在build/webpack.base.conf.js文件里

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

目录别名

当然我们也可以定义自己的目录别名,如下添加了’styles’: resolve(‘src/assets/styles’),

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
    }
  },

如果我们要使用styles下面的styl文件,我们可以通过以下方法引入styl(假设your.styl文件完整路径为src/assets/styles/your.styl)

@import '~styles/your.styl'

即通过~加别名的方式

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » vue-cli环境中使用内部样式表import导入外部styl文件或css文件,vue-cli目录别名设置

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址