vue-cli3 關於樣式引入的問題 ---- style-resources-loader

問題描述：

在樣式引入時，對於變量的引入，須要在每一個文件裏都要引入一遍，爲了不每次使用時都須要單獨引入一遍的問題，採用了style-resources-loader

解決方案：

步驟1：在項目目錄下安裝該插件 npm install stylus-resources-loader --save-dev 或者 vue add style-resources-loader 


步驟2：而後會有一個讓選擇語言的選項CSS Pre-processor?，選擇當前應用的語法，scss、sass、stylus和less，我目前選擇的是stylus

步驟3：在項目根目錄下的vue.config.js(沒有須要新建)下修改配以下截圖：

而後重啓一下項目，運行 npm run serve 就能夠了

至於爲何直接在main.js裏引入一個index.styl文件也不生效的我也有困惑

問：關於這個變量模板的引入，不是已經在 index.styl 引入了麼，和 icon.styl 和 reset.styl 同樣，我困惑的是既然引入了 ，爲何在單文件裏還須要引入這個變量模板，可是別的不須要再重複引入了，好比 icon.styl

答：從 stylus 編譯的角度去思考這個問題，當你去編譯某個組件的 stylus 文件，它使用了某個變量，若是沒有去 import variable，它怎麼知道這個變量是什麼。你所謂的 index，只是你認爲它是首頁，可是對 stylus 編譯器來講它卻一無所知。而 style-resource-loader 作的事情，纔是告訴 stylus 編譯器，我引用了一些全局變量，若是你找不到的時候，從我這兒來拿。

 參考地址1：http://www.pianshen.com/article/591366072/

 參考地址2：https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader

 參考地址3：https://cli.vuejs.org/zh/guide/css.html#%E8%87%AA%E5%8A%A8%E5%8C%96%E5%AF%BC%E5%85%A5