在vue-cli中安裝scss，且可以全局引入scss的步驟

在寫vue的css樣式時，覺得需要css預處理器讓自己的css更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護，於是在vue-cli腳手架采用scss。寫過的人都知道，每寫一個.vue文件都要在style上面@import global.scss文件的話，這樣很麻煩。css文件可以在main.js中可以直接import，而scss文件import會報錯，因此記錄下處理的方法。
步驟一： 安裝node-sass、sass-loader、style-loader

    cnpm install node-sass --save-dev
    cnpm install sass-loader --save-dev
    cnpm install style-loader --save-dev    

步驟二： 安裝sass-resources-loader

    cnpm install sass-resources-loader --save-dev

步驟三： 修改build中的utils.js

    scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/global.scss')
        }
      }
    )

可知，我是在assets中創建了一個global.scss文件。

最后，在組件中的style標簽添加lang="scss"，就OK了。

附上scss基礎教程: https://www.sass.hk/guide/

 

最近做了個系統，系統官網http://www.teamwedo.com, 本人微信: wzdasd, 歡迎騷擾！！