vue中sass、less等css扩展语言预配置

配置全局variable.scss，不需要在组件单独引用，可直接使用variable中的变量

vue.config.js：

module.exports = {
  devServer: {
    port: 9000
  },
  css: {
    loaderOptions: {
      sass: {
      	//不同版本的写法稍微有些区别，根据情况使用
      	//旧版本
        //data: `@import "路径/variable.scss";`  //项目中variable路径
        //新版本
        prependData: `@import "路径/variable.scss";`
      }
    }
  }
}

variable.scss：

$themeColor: #fff;
$errColer: red;

组件中使用：

//全局使用
<style lang="scss">
	#app{
		color: $themeColor;
	}
</style>

//局部使用
<style lang="scss" scoped>
	.error{
		color: $errColer;
	}
</style>