Как правильно изменить Ant Design стилей Vue

Ant Design
Поскольку Baidu не очень любит публиковать статьи о Yuque, в ближайшем будущем планируется перенести некоторые вещи, записанные Yuque, в CSDN и Nuggets.Содержание статьи может быть не новым для старых фронтенд-драйверов! Не вините это! Но я все равно буду записывать ямы, встречающиеся в передней части обучения, чтобы облегчить новичкам преодоление ям!

задний план

Недавно я работал над проектом и перешел на UI-фреймворк Ant Design.Исходный стиль должен быть изменен в соответствии с требованиями проекта, но в процессе использования Ant Design была обнаружена проблема: прямое изменение стиля в не может быть изменен! Мне нужно обратиться к официальному документу, чтобы решить эту проблему, но, к сожалению, я в растерянности... Официальный документ дает несколько способов изменения, но здесь я рекомендую использовать метод less, чтобы покрыть стиль.Сначала давайте посмотрим в том, как официальный документ описывает это:

微信截图_20190521234148.png

Для вышеуказанного документа проблема заключается в следующем:

1. __at__ относится к @, который не может быть написан так в main.js.Даже если вы удалите @ и напишите как import "~ant-design-vue/dist/antd.less", npm run dev также сделает ошибка;

2. Запишите приведенный выше код в созданный вами файл less, и произойдет та же ошибка. Метод записи под сетевой информацией заключается в том, чтобы написать следующий код в созданный вами файл less:

@import "~ant-design-vue/dist/antd.less";   // 引入官方提供的 less 样式入口文件
@import "your-theme-file.less";   // 用于覆盖上面定义的变量

Но, к сожалению, то же самое не работает. Правильный способ написания должен быть таким (см. шаги):

шаг

1. Добавляйте все меньше и меньше зависимостей загрузчика

Убедитесь, что правильная установка менее зависимый и менее загрузчик, введите следующую команду в консоли:

npm install --save-dev less-loader less

Загрузка идет слишком медленно, используйтеcnpmскачать.

2. Включите javascriptEnabled

Примечание. Вы можете выбрать один из следующих трех способов, который вам подходит.

веб-пакет@4:Измените файл webpack.config.js:

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
      options: {javascriptEnabled: true},
    }],
    // ...other rules
  }],
  // ...other config
}

Примечание. Область обработки less-loader не отфильтровывает пакеты antd в node_modules.

vue-кли 2:Измените файл build/utils.js:

// build/utils.js
// less: generateLoaders('less'),
less: generateLoaders('less', {javascriptEnabled: true}),

vue-кли 3 и 4:Измените файл vue.config.js (создайте новый, если он не существует):

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {javascriptEnabled: true}
    }
  }
}

3. Новый стиль сброса reset.less

Создайте новый файл less в статической папке проекта, здесь для примера возьмем reset.less, как показано на рисунке:

微信截图_20190522000319.png

4. Добавьте ссылки на стили

Установите зависимость ant-design-vue самостоятельно и добавьте следующий код в файл src/main.js:

//只添加未被注释代码行即可
//import Vue from 'vue'
import Antd from 'ant-design-vue'
//import App from './App'
import '../static/reset.less'           //———>引入 reset.less，请确保路径正确。

//Vue.config.productionTip = false

Vue.use(Antd)

//new Vue({
//  el: '#app',
//  components: { App },
//  template: '<App/>'
//})

5. Добавьте тестовый код

Добавьте кнопку стиля antd в HelloWorld.vue в разделе src/components, как показано на рисунке:

微信截图_20190522002125.png

6. Добавьте стили наложения

Добавьте следующий код в только что созданную папку reset.less для тестирования стиля покрытия:

@import '~ant-design-vue/dist/antd.less';  //———>后缀是 less，别写成 css 。

.ant-btn-primary {
  background-color: #F56C6C;
  border-color: #F56C6C;
}
.ant-btn-primary:hover, .ant-btn-primary:focus {
  background-color: #f55252;
  border-color: #f55252;
}

Затем запустите npm run dev, и браузер должен отобразить что-то вроде этого:

微信截图_20190522004239.png

Кнопка становится красной, а не синей по умолчанию. Если он не работает или компилируется неправильно, попробуйте поставитьменьше зависимостей понижение до 2.7.3Взгляните (версия с меньшей загрузкой оставляет это в покое).

Эта статья отредактирована командой грейпфрута - левша Фэнцзы, пожалуйста, при перепечатке прикрепите оригинальную ссылку, спасибо за сотрудничество!
Официальный сайт грейпфрута:www.seeyoz.cn/


Категории