/* variable.less */
@color: pink;
// vue组件内的style标签，将要使用上述变量的地方
<style lang="less">
.less {
  > div {
    color: @color;
</style>
less 全局变量引入方法一
 
使用css.loaderOptions
 less此方法只支持变量key:value赋值，若要使用less文件中变量，请使用以下两种方案
 
module.exports = {
  css: {
  	loaderOptions: {
	  less: {
        globalVars: {
          "@color": "#f00"
less 全局变量引入方法二
 
使用chainWebpack
 需要安装 style-resources-loader 插件
 
module.exports = {
  chainWebpack: config => {
	// 需要安装 style-resources-loader 与stylus一致
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 需要插入的文件路径
          patterns: "./src/assets/variable.less"
          // 需要插入的文件路径数组
          // patterns: ["./path/to/vars.less", "./path/to/mixins.less"]
        .end();
less 全局变量引入方法三
 
使用pluginOptions
 需要执行 vue add style-resources-loader命令
 命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写 引用文件的路径
 友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。
  
 
module.exports = {
  pluginOptions: {
  	"style-resources-loader": {
      preProcessor: "less",
      patterns: "./src/assets/variable.less"
      // patterns: ["./src/assets/variable.less"]
                    官网css引入配置参考文章sass/scss篇sass/scss文件与vue组件样式代码/* variable.scss */$color: orange;// vue组件内的style标签，将要使用上述变量的地方&lt;style lang="scss"&gt;.scss div {  color: $color;}&lt;/style&gt;sass 全局变量引入方法一使用css.loaderOptions此处友情提示 sass-loader v7 之前使
import header from "./components/header"
import aside from "./components/aside"
import footer from "./components/footer"
export default {
 name: 'layout',
 components: {
 header: header,
 aside: aside,
 footer
以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一
在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果
可能还会有奇奇怪怪的潜在问题，建议使用方法二。
· 解决方法二
配置vue.config.js文件，使得全局都能使用sc...
npm install node-sass sass-loader --save-dev
2.找到build中webpack.base.conf.js,在rules中添加scss规则
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass'v]
3.vue中使用
<style lang='scss' scoped>
</style&
				
按网上教程配置了，但是还是一直报错，报错信息如下：
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    width: $sideBarWidth !important;
      Undefined variable: "$sideBarWidth".
百度了一波，原来是sass-loader的版本的问题
// sass 版本 9 中使用 additionalData 版本 8 中使用 
				
在Vue项目中，我们可以使用SCSS来管理样式。要引入公用变量，首先需要在项目中创建一个公用变量的文件，比如_variables.scss。
在_variables.scss文件中，我们可以定义整个项目的公用变量，比如颜色、字体大小、边距等。例如：
```scss
$primary-color: #409eff;
$font-size: 14px;
$margin: 10px;
在需要使用这些公用变量的组件中，我们可以通过import语句引入_variables.scss文件，并使用这些变量。例如，在某个组件的样式中：
```scss
<style lang="scss" scoped>
@import "@/styles/_variables.scss";
.container {
  background-color: $primary-color;
  font-size: $font-size;
  margin: $margin;
</style>
这样，就可以在.container类中使用公用变量了。当项目中多个组件都需要使用这些公用变量时，只需要在对应的样式文件中引入_variables.scss即可。
需要注意的是，为了正确使用SCSS，我们需要安装sass-loader和node-sass依赖。在项目中通过以下命令安装这些依赖：
npm install sass-loader node-sass --save-dev
这样就可以在Vue项目中引入公用变量并使用它们了。同时，通过SCSS的功能，我们还可以使用混合（mixins）和继承（extends）等特性，更好地组织和管理项目的样式。