vue2+less開發,使用vux-loader,配置全域性less變數
阿新 • • 發佈:2018-12-26
使用less作為樣式工具,如果引入全域性樣式,那麼例如:
引入 reset.less
,預設樣式不包含reset,並且部分使用者自己有一套reset樣式,因此需要在App.vue進行手動引入
<style lang="less">
@import 'src/styles/reset.less';
</style>
但是使用less的一大優勢是使用變數來定義不同的值,然後進行全域性的呼叫使用
可以在每個檔案都用<style></style>
裡進行分別引用,使用是可以使用,但是build後會出現很多個該檔案的樣式,造成極大的冗餘。
也許你會想當然的把帶變數的樣式頁面放在App.vue
vue
頁面裡想要統一使用,然而vue在build
的時候根本就找不到你定義的變數,因為我用的vux
元件庫,所以,在這我就說說用vux
來進行的解決方案吧
根據vux
的使用要求,我對專案進行了手動配置,配置過程基本如下:
初始化基本的vue專案(網上有很多帖子,這裡就不再贅述)之後,
安裝vux
npm install vux --save
安裝 less-loader
npm install less less-loader --save-dev
安裝vux-loader
npm install vux-loader --save-dev
vux-loader工具的作用是對.vue程式碼進行預處理,不限於 vux
它是針對webpack+vue-loader
專案的工程化工具,簡化了webpack
外掛和loader
的使用和編寫,支援在vue-loader
處理之前進行預處理,同時內建對vux
元件專用的配置和優化外掛。
下面配置vux-loader
:
引入vux-loader
const vuxLoader = require('vux-loader')
在build/webpack.base.conf.js
檔案中,將整個module.export的內容賦給一個變數,比如originalConfig
,
然後在該檔案的最下方如下配置:
程式碼如下:
const webpackConfig = originalConfig; // 原來的 module.exports 程式碼賦值給變數 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [
{name: 'vux-ui'},
{name: 'less-theme', path: 'src/common/less/theme.less'},
{name: 'duplicate-style'}
]
})
上圖中的theme.less既是有全域性變數的檔案,到此配置完成!!
下面來看效果:
<p class="font">專案</p>
如有更好的解決方案或不妥之處,還請留言共同探討~~