create-react-app Создать проект Несколько вопросов о меньшем

внешний интерфейс JavaScript React.js CSS Less Ant Design

в предыдущей статьеИспользование Ant Design of React в приложении create-реагировать с Ejectв использованииcreate-react-appСоздал проект React, выставил конфигурацию веб-пакета с помощью Eject и успешно внедрил ее по мере необходимости.antd. Основное содержание этой статьи: Решениеcreate-react-appПосле создания проектаlessнеэффективные вопросы;antdВнедрить по требованиюlessисходные файлы и обнаруженныеbezierEasing.lessпроблема с ошибкой файла;antdКак настроить локальные шрифты;lessиспользоватьcss moduleКонфигурация.

прямой импортlessСтиль не работает

Создайтеtest.less, И вApp.jsвведен в

.test {
  color: red;
}

// App.js
...
import './test.less'
...
 <div className="test">test</div>
 <Button type="primary">Button</Button>
...

Установлено, что цвет теста не вступает в силу, потому что приложение Create-React - не имеет встроенного встроенного загрузчика

Установитьlessа такжеless-loaderи измените конфигурацию веб-пакета

$ cnpm i less less-loader --save-dev

Изменить конфигурацию веб-пакета Исправлятьwebpack.config.dev.jsа такжеwebpack.config-prod.jsФайл конфигурации, добавить меньше конфигурации файла:

// webpack.config.dev.js
...
  {
    test: /\.less$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('less-loader') // compiles Less to CSS
      }
    ],
  },
...

После перезапуска проекта стиль LESS вступил в силу.

antdстиль с использованиемlessИмпорт по исходному файлу

существуетbabel-plugin-importВот такая пара описаний стиля в :

["import", { "libraryName": "antd" }] : import js modularly

["import", { "libraryName": "antd", "style": true }] : import js and css modularly (LESS/Sass source files)

["import", { "libraryName": "antd", "style": "css" }] : import js and css modularly (css built files)

Измените package.json наstyleЗначение изменяется наtrue

...
  "babel": {
    "presets": [
      "react-app"
     ]
     ],
    "plugins": [
      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
    ]
  }
...

После перезапуска ошибка компиляции, подсказкаbezierEasing.lessдокумент.bezierEasingMixin()Ошибка метода:

Проверьте по адресу проблемы, указанному в отчете об ошибке:issues/44

Причина в том, что опция Enable Inline JavaScript устарела после less v3:меньше CSS.org/usage/#less…

Есть в основном 2 решения

  • Отбросьте меньше версии ниже 3.0
  • Загрузчик Less добавляет конфигурацию и включает JavaScript:
// webpack.config.dev.js
...
  {
-    loader: require.resolve('less-loader') // compiles Less to CSS
+    loader: require.resolve('less-loader'), // compiles Less to CSS
+    options: {
+        javascriptEnabled: true
+    }
    
  }

опять такиnpm start, проект можно запускать нормально.

antdИспользовать локальный шрифт iconfont

Обновленная 5 сентября 2018 года серия про дизайн муравьев открыла серию крупных обновлений в сентябрьском школьном сезоне.umiВышла версия 2.0, а вместе с ней иant design proВерсия 2.0 построена на umi 2.0. Сегодня заметил, что основным обновлением в версии 3.9.0 дизайна ant является рефакторинг значка с использованием SVG вместо предыдущего значка шрифта css. Поэтому, если вы используете ant design версии 3.9.0 или более поздней, проблем с тем, что файлы шрифтов нельзя будет найти в автономном режиме, не будет. Если вы используете дизайн ant ниже версии 3.9.0, вы можете обратиться к следующему методу, чтобы использовать iconfont в автономном режиме.

Файл iconfont по умолчанию Ant Design размещен по адресу iconfont.cn и использует адрес alicdn, предоставляемый платформой по умолчанию, к которому можно получить доступ и использовать в общедоступной сети.

Поскольку alicdn имеет ограничения на доступ к некоторым доменным именам или должен использоваться в среде интрасети, шрифты необходимо загружать локально.

Последние файлы iconfont можно найти по адресуэта ссылкаскачать.

После загрузки поместите файл шрифта вpublic/iconfont/под дорожкой

Поскольку проект использует приложение Create-React-App для создания проекта, а стиль использования ANNDbabel-plugin-importСпрос на стили загрузки, мы можем только принятьПользовательские темысерединаless-loaderизmodifyVarsНастройте, чтобы переопределить исходную переменную стиля.

конкретные изменения Исправлятьwebpack.config.dev.jsа такжеwebpack.config-prod.jsконфигурационный файл

// webpack.config.dev.js
...
  {
     loader: require.resolve('less-loader'), // compiles Less to CSS
     options: {
        javascriptEnabled: true，
        modifyVars: {
          "icon-url": "'/public/iconfont/iconfont'"
        }
     }
  }

Перезапустите проект и успешно внедрите локальные шрифты

должен быть в курсеwebpack.config-prod.jsв файлеicon-urlпуть должен бытьpublicЗамените на путь к файлу проекта рабочей среды после упаковкиpublicКопируйте файлы и папки прямо вbulidпод дорожкой. Использование относительного пути приведет к ошибке и не может быть скомпилировано.Я не знаю, есть ли лучший способ справиться с этим.Я надеюсь, что читатели могут предоставить лучший способ.

// webpack.config-prod.js
...
  {
     loader: require.resolve('less-loader'), // compiles Less to CSS
     options: {
        javascriptEnabled: true，
        modifyVars: {
          "icon-url": "'/your-project-name/iconfont/iconfont'"
        }
     }
  }

Ввести меньше в виде модуля css

Увеличиватьcss-loaderКонфигурация

          {
            test: /\.less$/,
            // exclude: [/node_modules/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                   importLoaders: 1,
+                  modules: true
                },
              },
              {
                loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                  modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"
                  }
                }
              }
            ],
          },

ИсправлятьApp.js, импортировано с помощью модуля css

- import './test.less'
+ import styles from './test.less'

    class App extends Component {
      render() {
        return (
          <div className="App">
-           <div className="test">test</div>
+           <div className={styles.test}>test</div>
            <Button type="primary">Button</Button>
          </div>
        );
      }
    }

Перезапустите проект, стиль теста, введенный модулем css, вступит в силу, но стиль кнопки antd недействителен.

Нужно изменитьwebpack.config.dev.js, только правильноsrcсерединаlessфайл открытьcss module, немного громоздко писать сюда, должен быть способ получше.

// webpack.config.dev.js
...
          {
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                },
              },
              {
                loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                  modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"
                  }
                }
              }
            ],
          },
          {
            test: /\.less$/,
            include: [/src/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true
                },
              }
            ],
          },
...

Обновление 2018-08-02, брат оставил сообщение в области комментариев, в котором говорилось, чтоnpm installназад,css moduleВведенный стиль недействителен. Я протестировал его сегодня, и у него есть эта проблема. Я пытался изменить указанную выше пару.lessПоследовательность обработки файлов загрузчиком может решить эту проблему, но принцип не очень понятен, помогите пожалуйста братья кто понял принцип, спасибо

// webpack.config.dev.js
...
          {
            test: /\.less$/,
            include: [/src/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true
                },
              }
            ],
          },
          {
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                },
              },
              {
                loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                  modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"
                  }
                }
              }
            ],
          },
...

Суммировать

Эта статья находится вejectизcreate-react-appНа основе проекта, внедряется по требованиюantd, столкнулся сlessНесколько проблем с : решеноlessПроблема в том, что файл не вступает в силу, среда интрасети использует локальнуюiconfontконфигурация,css moduleспособ конфигурации. В этой статье все еще есть некоторые методы настройки, которые не оптимальны, надеюсь, вы сможете дать лучшие решения.

Я начинаю React недавно, и я собираюсь записать свой собственный процесс обучения и пошагового выполнения. Следующая статья должна бытьdvaиспользование.

использованная литература

Категории