предисловие
create-react-appЭто официальная платформа facebook, которую мы настоятельно рекомендуем отдельным разработчикам, а также малым и средним компаниям для быстрого создания проектов. Есть много CSS-решений для реакции, здесь я использую его для технического отбора.css modulesа такжеsassЗатем используйте универсальную компонентную библиотеку с помощью АНТД. Но создание-реактивное приложение не поддерживаетсяcss modulesа такжеsass, поэтому требуется дополнительная настройка.
настроить
Добавьте модули css и sass
Предоставление конфигурации с помощью извлечения
create-react-appПо умолчанию не выставляетсяwebpackНастроено, поэтому нужно его выкинуть. Обратите внимание: если проект находится в среде хранилища git, сначала отправьте код в хранилище git, иначе будет сообщено об ошибке.
npm run eject
npm добавить модули css и sass
npm install react-css-modules
npm install sass-loader node-sass
Установка sass здесь может привести к проблемам со стеной и ошибкам отчета, поэтому либо используйте cnpm, либо используйте настройки локального прокси, потому что у меня есть ss, поэтому используйте локальный прокси
// 开启代理
npm config set proxy http://127.0.0.1:1080
// 安装完sass后关闭代理
npm config delete proxy
конфигурация веб-пакета
Здесь наступает момент, мы должны датьwebpackконфигурацияcss-modulesа такжеsass-loader. но использоватьcss-modulesсделаюnode_modulesСтиль CSS в библиотеке не может быть найден, например, antd, который будет использоваться позже.На данный момент нам нужно включить, чтобы устранить влияниеnode_modules, так чтоcss-modulesне повлияетnode_modules
изменить проектconfigв каталогеwebpack.config.dev.jsа такжеwebpack.config.prod.js, объясните эти два файла, первый это среда разработкиnpm startиспользования, последнийnpm run buildиспользовать после упаковки
- Исправлять
webpack.config.dev.js:
Около строки 160 найдитеtest: /\.css$/, место китайской аннотации - место для модификации и дополнения
{
test: [/\.css$/, /\.scss$/],// 这里增加SCSS的支持
exclude: [/node_modules/],// 这里去排除node_modules，防止css modules影响到node_modules
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, // 这里增加对css modules的支持
localIdentName: '[name]__[local]__[hash:base64:5]' //这里增加对css modules的支持
},
},
{
loader: require.resolve('sass-loader'), // 这里增加sass的支持
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
// 因为上面排除了css_modules所以这里一定要再添加个排除src来识别css_modules
// 其实就是复制之前没修改前的所有，再增加一个exclude: [/src/]
{
test: /\.css$/,
exclude: [/src/], // 这里添加排除src，
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
}
- Исправлять
webpack.config.prod.js:
и изменено вышеwebpack.config.dev.jsаналогичный
{
test: [/\.css$/, /\.scss$/], // 这里增加SCSS的支持
exclude: [/node_modules/], // 这里去排除node_modules
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: true,
modules: true, // 这里添加css modules支持
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('sass-loader'), // 这里添加sass支持
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.css$/,
exclude: [/src/], // 排除src
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: true,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
}
Установите антд и настройте
В основном конфигурация установкиantdа такжеbabel-plugin-import, так чтоantdЗагружать стили по запросу
npm добавить antd и babel-plugin-import
npm install antd
npm install babel-plugin-import
настроить бабел
Добавьте в корневой каталог проекта.babelrcфайл, затем настройте следующим образом
{
"presets": [
"react-app"
],
"plugins": [
"transform-runtime",
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
ты закончил