寫(xiě)在前面

環(huán)境弄了大半天，網(wǎng)上查了很久，整理一下

版本問(wèn)題

報(bào)錯(cuò)如下：

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

就按照大家說(shuō)的降版本，我最后的環(huán)境版本是這樣的

    "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

配置問(wèn)題

報(bào)錯(cuò)如下,按照網(wǎng)上的配置在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";`
            }
        }
    }
}

可以運(yùn)行的正常的config配置

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

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

sass-loader版本不同
sass-loader v8以下版本 這個(gè)選項(xiàng)名為“data”
sass-loader v8版本 這個(gè)選項(xiàng)名為“prependData”
sass-loader v10以上版本 這個(gè)選項(xiàng)名為 “additionalData”

參考記錄

Syntax Error:<template>^ File to import not found or unreadable: ./src/assets/css/variables.scss
npm報(bào)錯(cuò)File to import not found or unreadable: @/assets/styles/global.scss.
Vue 設(shè)置全局Css變量
vue.config.js配置項(xiàng)以及注意事項(xiàng)（vue3）