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