Vue 技术细节

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