快捷導(dǎo)航

vue?cli使用iview自定義主題遇到的坑及解決

更新時間：2023年04月18日 14:45:13 作者：前端歷劫之路

vue?cli使用iview自定義主題遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue cli使用iview自定義主題遇到的坑

定制主題，這里講變量覆蓋

當(dāng)你老老實(shí)實(shí)的把上面文檔中的代碼一一復(fù)制粘貼到項(xiàng)目文件中時，發(fā)現(xiàn)了還沒裝less,所以你就

npm install less –save 
npm install less-loader –save

結(jié)果呢

下面我們來解決他

我們找到項(xiàng)目根目錄下build下的utils.js文件，把原來的（跟下面代碼差不多）改成下面所示。

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less',{ javascriptEnabled: true }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

運(yùn)行就ok了

iview主題定制化問題

1.項(xiàng)目中有需求：項(xiàng)目整體顯示某個特定的顏色

2.使用 vue + iview

3.按照iview官網(wǎng)顯示有兩種方法，目前說第一種變量覆蓋

4.按照官網(wǎng)的方法

如果你的項(xiàng)目使用了 webpack 工程，可以通過變量覆蓋的方式來實(shí)現(xiàn)主題定制。

首先在項(xiàng)目中先建一個目錄，比如 my-theme，然后在 my-theme 下建立一個 less 文件 index.less，并寫入下面內(nèi)容：

@import '~iview/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

5.然后在入口文件 main.js 內(nèi)導(dǎo)入這個 less 文件即可：

import Vue from 'vue';
import iView from 'iview';
import '../my-theme/index.less';

Vue.use(iView);

寫完之后我開始運(yùn)行，然兒報錯了

問題報錯是模塊解析失敗，于是找度娘，顯示是less的問題，less裝的是3.0以上的，度娘說需要3.0以下的，于是安裝2.7.3版本，發(fā)現(xiàn)還是不行，emmm…雖然好多說都可以，但是我這邊還是不行，于是在找，發(fā)現(xiàn)vue.config.js中需要配置less

module.exports = {
  css: {
    // extract: true, // 是否使用css分離插件 ExtractTextPlugin
    // sourceMap: false, // 開啟 CSS source maps?
    loaderOptions: {
        less: {
            javascriptEnabled: true //less 配置
        }
    }, // css預(yù)設(shè)器配置項(xiàng)
    modules: false // 啟用 CSS modules for all css / pre-processor files.
	}
}

終于這次運(yùn)行可以了