首页 > 其他 > 详细

Vue 技术细节

时间:2020-04-09 16:35:54      阅读:59      评论:0      收藏:0      [点我收藏+]

css样式

  • css加载器css-loader 样式加载器style-loader 以及Vue样式加载器vue-style-loader
    css-loader会像import / require()一样解释css中的 @import 和 url() 代码并将解析它们。这很重要,因为你可以在css中导入使用模块,比如@import导入其它css模块,使用background: url(‘./assets/bg.png‘);导入一个png图片模块作为背景。
    vue-style-loader是基于样式加载器style-loader的fork。与样式加载器类似,您可以将其链接到css-loader之后,以将CSS作为样式标签动态注入到文档中。
    module: {
        rules: [
            { test: /\.vue$/, loader: ‘vue-loader‘, },
            { test: /\.css$/, use: [ ‘vue-style-loader‘, ‘css-loader‘, ], }, // 实际处理顺序相反
            { test: /\.(png|jpg|ico|mkv|m4a)$/, loader: ‘url-loader?limit=10240‘, },
        ],
    },
  • .vue文件中的<style>模块
    我们知道<style>模块是可以带参数的,比如lang: <style lang="sass">指定"文件"后缀,又比如scoped对css在模块范围内使用参数进行限定。
    有时我们需要导入一个只在模块范围内生效的css样式,可以使用src参数:
<style scoped src="buefy/dist/buefy.css" />

END

Vue 技术细节

原文:https://www.cnblogs.com/develon/p/12667209.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!