踩坑，vue項目中，main.js全局引入scss文件時報錯

前言

最近一直在搭建新項目，考慮到項目本身的需求以及后期的維護和版本迭代，於是乎想要全局引入scss文件，經歷過多次的嘗試和配置，終於把scss文件全局引入成功了，先來比個yeah~（先承認一下自己太菜了，不然也不至於把各種方法都試遍了才配置成功）

正文

先在網上找了一篇不錯的教程，比如這個： https://www.jianshu.com/p/1c444b825d34  安裝。（只是拿這篇文章舉例，並不是說這種配置方式有問題，本人對這篇文章和作者沒有任何建議和看法）

npm install node-sass sass-loader --save-dev

或者

npm install sass-loader --save-dev
npm install node-sass --sava-dev

 

然后按照教程添加scss規則
/build/webpack-base-conf.js文件

module:  {
    rules: [
        {
              test: /\.scss$/,
              loaders: ['style', 'css', 'sass']
        }
    ]
}

還有添加下面這種代碼的：

rules: {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              // Provide path to the file with resources
              resources: './path/to/resources.scss',
  
              // Or array of paths
              resources: ['./path/to/vars.scss', './path/to/mixins.scss']
            },
          },
        ],
      },

 

到這兒，自以為差不多了，然后帶着非常激動的心情 npm run dev

發現項目報錯並沒有配置成功

然后在網上搜索報錯信息，看到下方截圖的解決方案

 

 （截圖來源於https://blog.csdn.net/guojing5721/article/details/80595195）

於是小玲有懷着激動的心情，找到build\webpack.base.conf.js文件，然后按照下方截圖配置：

 

 

然后依然報錯，小玲沮喪的又多看了幾篇其他文章，然后看到了這篇：

 

 

（這張圖片來源於https://www.cnblogs.com/xjguan/p/11544022.html  ）

 

雖說和小玲的報錯信息不太一樣吧，但是好歹是一個類型的，但是重點是箭頭指向的紅框中的文字。

 

原來，新版本的vue-cli已經幫我們把sass-loader配置好了，放在util.js里面了

 

 

前面我們通過   npm install node-sass sass-loader --save-dev  安裝好了scss依賴

並在build文件夾下的webpack.base.conf.js的rules里面添加了如下配置

{

test: /\.scss$/,

loaders: ['style', 'css', 'sass']

}

 或者build\webpack.base.conf.js文件別的配置。現在不需要這樣配置。如果這樣配置會報錯，因為配置重復了。

只需將此配置刪除即可，然后小玲再次懷着務必興奮的心情將剛剛的所有配置全都刪除。

然而，項目又給我開了一個無比巨大的玩笑，拋給我了一個這樣的錯誤。

 

小玲當時整個人就不好了（急需火鍋，奶茶補充能量）

但是小玲非常堅強，絕對不能放棄，於是喝了一口水，脫掉外套，又開始查錯誤

於是發現原來是小玲太厲害了，安裝的版本太高了，好吧，那小玲就勉強降低一下身段，把包的版本降低一點吧

原來安裝的sass-loader的版本為最新8.3.2，先安裝的版本是7.3.1

 

 

操作步驟：

 ①先把項目package.json文件中sass-loader版本改為7.3.1

 ②重新安裝包： npm install  或者cnpm install

 ③啟動項目： npm run dev

 

功夫不負有心人，奇跡終於出現了

 

 

 看到熟悉的綠色，小玲露出了笑臉ヾ(●´∀｀●) 

 

 

最后

 

小玲太菜了，不然也不會安裝個sass都這么多波折，不過好歹最后成功啦！

寫到最后,也鼓勵像小玲一樣努力工作和學習的前端小伙伴們，不管遇到任何困難或者問題，都要堅持下去，想辦法解決。困難和問題遇到的多了，就沒有問題啦，yeah~