写在前面

环境弄了大半天，网上查了很久，整理一下

版本问题

报错如下：

# [Syntax Error:<template>^ File to import not found or unreadable: ./src/assets/css/variables.scss](https://www.cnblogs.com/cnwcl/p/15364901.html)

就按照大家说的降版本，我最后的环境版本是这样的

    "node-sass": "^4.14.1",
    "sass-loader": "^7.3.1",
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "element-plus": "^2.2.10",
    "nprogress": "^0.2.0",
    "vue": "^3.0.0",
    "vue-axios": "^3.4.1",
    "vue-router": "^4.1.2",
    "vuex": "^4.0.2"

"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",

npm uninstall node-sass --save-dev
npm install node-sass@4.14.1 --save-dev


npm uninstall sass-loader --save-dev
npm install sass-loader@7.3.1 --save-dev

配置问题

报错如下,按照网上的配置在vue.config.js中配置总是不成功

Syntax Error:
  <el-menu
         ^
      Undefined variable: "$topNavTextColor".
      in /Users/cm/Downloads/cm/interface-web/src/views/nav/NavMenu.vue (line 3, column 11)


 @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/nav/NavMenu.vue?vue&type=style&index=0&id=0b400e28&lang=scss 4:14-459 15:3-20:5 16:22-467

异常的config配置

vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "~@/common/css/global.scss";`
            }
        }
    }
}

可以运行的正常的config配置

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                data: `@import "~@/common/css/global.scss";`
            }
        }
    }
}

原因在这里！！！！我用的7.X版本，所以用的是data，vue3也不一定就是prependData的！看自己的版本修改！

sass-loader版本不同
sass-loader v8以下版本 这个选项名为“data”
sass-loader v8版本 这个选项名为“prependData”
sass-loader v10以上版本 这个选项名为 “additionalData”

参考记录

Syntax Error:<template>^ File to import not found or unreadable: ./src/assets/css/variables.scss
npm报错File to import not found or unreadable: @/assets/styles/global.scss.
Vue 设置全局Css变量
vue.config.js配置项以及注意事项（vue3）