vue-css樣式沖突解決BEM、scoped、模塊化

樣式沖突原因：樣式會繼承，子組件會繼承父組件；樣式都會寫入style標簽。解決方法：BEM、scoped、模塊化
npm i node-sass sass-loader -S安裝環境
方法1 樣式定義: 樣式要以類或者id 打頭作為選擇器

		<style module>
			.box{...}
			#box2
	調用樣式:
		<div :class="$style.box"(拿到$style實例屬性box)
		<div :class="$style.box2"

方式二

需要安裝 node-sass / sass-loader
		<style lang="scss"  使用: <xx class="box"
		<style lang="scss" module  使用: <xx class={$style.box}
		<style lang="scss" scope  使用: <xx class=box

二 、引用全局scss變量
1、一次性引用全局變量方法1（只能引用一次）




2、引用全局變量

1） vue.config.js
				module.exports = {
				  css: {
				    loaderOptions: {
				      sass: {
				        data: `
				          @import "@/assets/css/base.scss";
				        `
				      }
				    }
				  }
				}

vue-cli2腳手架 

		需要安裝node-sass / sass-loader

		配置: 在build文件夾下的webpack.base.conf.js的rules里面添加配置
		  {
	        test: /\.scss$/,
	        loaders: ["style-loader", "css-loader", "sass-loader"]
	      }

		使用:	<style lang="scss"  使用: <xx class="box"
		使用:	<style lang="scss" module  使用: <xx class={$style.box}
		使用:	<style lang="scss" scope  使用: <xx class={box}

	引入sass全局變量?
		定義主題： $theme-color: '#300' -> base.scss -> assets
		
		安裝: sass-resources-loader

		配置webpack： 在build/utils.js中修改配置
			scss: generateLoaders('sass').concat(
			  {
			    loader: 'sass-resources-loader',
			    options: {
			      resources: path.resolve(__dirname, '../src/assets/scss/base.scss')  //注意自己的路徑
			    }
			  }
			),