在vue开发过程中如果使用内部样式表时,需要用import导入外部css或styl文件,
其引入方法分别为:
<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'
即通过~加别名的方式