初探react技术栈(一)

栏目: CSS · 发布时间: 5年前

内容简介:最近已经开始使用react技术栈了,从头开始搭建项目,有必要的记录一下配置的过程以及项目分层的思路,这次后台项目采用的主要采用这是官方维护的脚手架应用 我们一般也采用这个为了提升我们写样式的效率 一般采用 less/sass

最近已经开始使用react技术栈了,从头开始搭建项目,有必要的记录一下配置的过程以及项目分层的思路,这次后台项目采用的主要采用 react-create-app 脚手架以及 Ant Design UI 以及多语言 react-intl

create-react-app

这是官方维护的脚手架应用 我们一般也采用这个

$ npm or cnpm

$ npm install create-react-app -g #全局下载

$ create-react-app #[项目名称] 新建项目

# 如果想要把 webpack 配置暴露出来 可以执行以下命令
$ npm run eject # 初始时可以在package.json中找到
复制代码

less/sass

为了提升我们写样式的效率 一般采用 less/sass

# less
$ npm i less less-loader

# sass
$ npm i node-sass sass-loader
复制代码

并在 webpack.config.js 修改以下配置:

# 添加sass支持
# 找到 file-loader
{
    loader: require.resolve('file-loader'),
    exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.scss$/],
    options: {
    name: 'static/media/[name].[hash:8].[ext]',
    },
},
# 在exclude中加上`/\.scss$/` 并且在后面加上
{ 
    test: /\.scss$/,
    loader: ['node-sass', 'sass-loader']
}
复制代码
// 添加less支持 这种是省事的写法 如果需要 antd 的个性化主题定制 请参看下文 antd less 配置
// 找到 `/\.css$/` 改成 `/\.(?:le|c)ss$/`
// 找到 `getStyleLoaders` 函数 在其中 loaders 中添加
{
    loader: require.resolve('less-loader'),
    options: cssOptions,
}
// 这样就完成 less 支持
// 如果想要样式模块化那么就需要加上  modules: true
{
    test: cssRegex, // cssRegex这个代表着就是 匹配文件的正则表达式
    exclude: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    modules: true,  //模块化
    sourceMap: isEnvProduction && shouldUseSourceMap,
    }),
    sideEffects: true,
},
复制代码

完成对less/sass支持,!注意 样式模块化需要不同的文件命名方式 比如 app.scss 模块化 -> app.module.scss 否则编译器也不知道那个文件是私有的

配置路径

一般情况下 我们引入文件都是需要相对路径但是如果嵌套层级少还可以但是如果层级很多 我们就需要寻找一种办法帮助我们 来摆脱繁琐的 ./../......

同样还是在 webpack.config.js 找到 alias 在其中添加 '@': paths.appSrc

初探react技术栈(一)

Ant Design

之前一直使用的 vue + element 的布局方式,而这次写项目则是主要使用 React + Ant Design

不得不说 Ant Design 整体的动画以及各种方案让我耳目一新!天啦噜这个动画 爱了 爱了

# 下载antd
$ npm or cnpm
$ npm i antd --save 
复制代码

首先在全局样式文件中写 @import '~antd/dist/antd.css'; 此时就可以看到antd已经引入成功了

根据 Ant Design 官方文档 推荐其中定制主题介绍了less

所有可定制的less变量

@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
复制代码

警告根据 antd issues 7929 中提示 css less 不要都采用less-loader

// 首先在webpack中定义两种变量
const lessRegex = /\.less$/; // 可以找到 `style files regexes` 处声明
const lessModuleRegex = /\.module\.less$/;
// 这是为了匹配 .less / .module.less 文件
// 找到 `getStyleLoaders` 函数 在其中 loaders 中添加
{
    loader: require.resolve('less-loader'),
    options: cssOptions,
}
// 找到 sassModuleRegex 位置处 在对象后加上 以下代码
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap
    }
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true, // 模块化
        getLocalIdent: getCSSModuleLocalIdent,
    }
    ),
}
复制代码

此时还没有完成 但是less / module.less 但是在改主题色的时候,我们发现会报错

初探react技术栈(一)
// 此时需要修改以下代码
// 找到 `getStyleLoaders` 函数 在其中 loaders 中添加
{
    loader: require.resolve('less-loader'),
    options: {...cssOptions, javascriptEnabled: true}, // 启用js编译。。。
}
复制代码

相信用scss/sass的同学也不少

// 找到 `getStyleLoaders` 函数 在其中 loaders 中添加
{
    loader: require.resolve('less-loader'),
    options: {...cssOptions, javascriptEnabled: true, modifyVars: {'primary-color': '#000',}}, // 启用js编译。。。
}
复制代码

然后在 index.js 入口文件 中引入自定义的全局less文件,并在里面引入 ~antd/dist/antd.less 然后可以继续使用scss写样式不受影响,虽然这种做法非常鸡肋,但是我搜索了几种方法,但是都不理想,希望有知道更好的方法的大佬告知


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机算法导引

计算机算法导引

卢开澄 / 第2版 (2006年1月1日) / 2006-1 / 38.0

本书为《计算机算法导引——设计与分析》的第2版。书中内容分3部分:第1部分是基本算法,按方法论区分,包含优先策略与分治策略、动态规划、概率算法、并行算法、搜索法、数据结构等;第2部分是若干专题,包括排序算法、计算几何及计算数论、线性规划;第3部分是复杂性理论与智能型算法,其中,智能型算法主要介绍了遗传算法和模拟退火算法。本书可作为计算机系本科学生及研究生教材,数学系师生和科研T作者也可将其作为参考......一起来看看 《计算机算法导引》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具