Vue項目中使用CSS Modules

下面寫一個簡單的配置和使用的demo,詳細的文檔可以看CSS Modules vue官方的文檔
webpack.config.js中

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      },
	  {
	    test: /\.scss$/,
	    use: [
	      'vue-style-loader',
	      {
	        loader: 'css-loader',
	        options: { modules: true }
	      },
	      'sass-loader'
	    ]
	  }
    ]
  }
}

html

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

css

<style module>
.red {
  color: red;
}
</style>