v0.2.1

New

• Allow to load a css file via query

  You can load a css file with template by specifying the file path via query. the css file will be processed by loaders that you specified in webpack config as same as ordinary webpack behavior.

  // ./style.css will be loaded
  import template from './template.html?style=./style.css'

• Support vue-loader like scoped styles and CSS Modules

  If you enable scoped flag of vue-template-loader, all styles loaded by query will be scoped like vue-loader. That means unique attribute (like data-v-123) will be added all css selectors and html elements. Note that you have to add enforce: 'post' into rules for style files.

  module.exports = {
    module: {
      rules: [
        {
          test: /\.html$/,
          use: 'vue-template-loader?scoped' // add `scoped` flag
        },
        {
          enforce: 'post', // required
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }

  If you prefer to use CSS Modules, you can use it by just adding modules flag to css-loader's query. vue-template-loader will add $style property that has hashed classes and you can refer it from a template.

  module.exports = {
    module: {
      rules: [
        {
          test: /\.html$/,
          use: 'vue-template-loader'
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader?modules'] // Enable CSS Modules
        }
      ]
    }
  }

  <p :class="$style.foo">Hello</p>