Node升級后vue項目node-sass報錯如何解決

這篇文章主要介紹“Node升級后vue項目node-sass報錯如何解決”，在日常操作中，相信很多人在Node升級后vue項目node-sass報錯如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Node升級后vue項目node-sass報錯如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Node升級后vue項目node-sass報錯

node升級命令

npm install -g n
sudo n 16.14.0

升級后以前的vue 項目 node-sass 報錯

解決方案

1.卸載原有的node-sass 和 sass-loader

npm uninstall node-sass sass-loader

2.升級項目所有安裝的依賴

npm update

3.安裝sass-loader與sass

npm install -D sass-loader@^10 sass

4.重新打包

npm run dev （如圖2）

5.Syntax Error: SassError: expected selector.

報錯信息表示 /deep/ 寫法的錯，修改為 （如圖3）

若依vue前端node升級記錄

原來的node版本是

node: 14.9.0
node-sass: 4.14.1
sass-loader: 8.0.2

升級后node

node: 15.8.0
node-sass: 6.0.1
sass-loader: 10.3.1

升級后遇到的問題

// 在安裝完合適的sass-loader以后，運行項目報錯，原來項目里全局引入scss文件的配置，sass-loader的版本對于這個在文件之前追加scss代碼的選項名均有不同
sass-loader v8-，這個選項名是 “data”
sass-loader v8 中，這個選項名是 “prependData”
sass-loader v10+，這個選項名是 “additionalData”  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import '@/assets/styles/variables.scss';`,
      },
    },
  },

// 結果出現了 Syntax Error: SassError: This file is already being loaded. 這個錯誤。原因是將這個scss文件重復引入了, 修改如下：

  css: {
    loaderOptions: {
      sass: {
        // additionalData: `@import '@/assets/styles/variables.scss';`,
        additionalData: (content, loaderContext) => {
          const { resourcePath } = loaderContext;
          if (resourcePath.endsWith("variables.scss")) return content;
          return `@import "@/assets/styles/variables.scss"; 
          ${content}`;
        },
      },
    },
  },

到此，關于“Node升級后vue項目node-sass報錯如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！