从零搭建项目(3) --- 前端: 使用Sass和Antd

我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用Sass和Antd 前端: 开发体验优化 前端: 搭建路由和状态管理 前端: 支持Axios 前端: 打包与环境变量设置 前端: 团队代码规范 后端: 项目初始化和使用Koa相关 后端: 使用TypeORM和MySQL 部署: 使用nginx部署前端项目 部署: 后端部署 部署: 使用jenkins自动化部署 前言 该篇博客主要介绍如何在项目中使用Sass和Antd,有用到的知识点如下: 支持sass 支持css-module 支持公共样式 antd及其按需加载 支持sass 什么是sass sass是一款css预处理语言,支持变量,嵌套,mixin和导入等功能,可以极大地方便和简化css写法。 支持sass 要使用sass的语法,我们不单单要安装sass-loader和node-sass,还需要安装style-loader以及css-loader npm i -D sass-loader node-sass style-loader css-loader 另外在国内装不下node-sass或者装得慢的同学可以在根目录下新建.npmrc,在里面添加如下代码使用淘宝源进行安装,或者直接使用nrm切换到淘宝源安装 image.png 安装完成后,我们在build/rules下新建styleRules.js文件,并编写相关配置: image.png 之后在webpack.config.js中进行引用: image.png 这里有一点需要注意的是,webpack调用这三个loader的顺序是从右到左的,也就是上图的从下到上,其中: sass-loader: 将 Sass 编译成 CSS,默认使用 Node Sass css-loader: 将 CSS 转化成 CommonJS 模块 style-loader: 将 JS 字符串生成为 style 节点 然后src下新建一个index.scss,随便写入一个样式,在index.tsx中使用: image.png image.png 这时候就可以使用sass来进行样式编写了 image.png 支持css-module 什么是css-module css-module是CSS模块化的一种方案,为的就是解决css类名冲突问题,同等的方案还有BEM规范 支持css-module 要支持css-module非常简单,只要在前面的styleRules.js文件中,针对css-loader做一个配置即可: image.png 然后在src/index.tsx中将scss文件的引入和使用方式改成如下: image.png 这时候我们就可以查看效果了,可以看到test变成了一串自动生成的hash码: image.png 当然也有小伙伴可能会说,变成了这一串hash那我怎么知道这个元素是哪个组件的呢?我们把配置改成如下即可: image.png 可以看到类名中加上了原本的类名: image.png 在前面配置和使用中,虽然已经可以正常使用,但是index.tsx出现了一个错误,说找不到index.scss文件 image.png 原因是ts不认识这个scss文件,所以这时候需要编写对应的类型文件.d.ts。 我们在src下新建types文件夹,并新建typed-css-modules.d.ts文件,在里面定义scss模块内容: image.png 这时候引用scss文件就不会再报错了,但同时存在一个问题,styles的类型是any: image.png 要添加对styles的类型定义,我们当然可以自己新建一个index.scss.d.ts文件在里面自己写一个interface来定义,但是这样未免太过于麻烦,所以这时候我们可以使用css-modules-typescript-loader这个库来帮助我们定义,首先需要安装它npm i -D css-modules-typescript-loader,然后在styleRules.js中加上他: image.png 在编写或改动了scss文件后, 它会自动生成index.scss.d.ts文件: image.png 支持公共样式 在支持了sass之后,我们可以在样式代码的编写中使用变量,而有些变量可以放置在公共的样式文件中,使用的时候直接引用即可。 我们在src下新建styles文件夹,然后新建base.scss文件,在里面写入一个变量: image.png 之后我们在index.scss文件中引用这个变量: image.png 这时候还需要在styleRules.js中,将公共样式文件夹的路径添加进去,否则sass-loader不会去编译这些文件,这里需要注意的是,这里使用的是sass-loader@7.3.1,而在最新的8.0.0版本不能直接在options中写includePaths,而需要在sassOptions中写,之前的版本则可以直接写includePaths,另外8.0.0版本和下一章会说到的thread-loader配合起来会报错,所以现在先不要用8.0.0版本: image.png 这是我们可以看到效果依旧正确 image.png antd及其按需加载 React技术栈中,很多人都会使用antd作为自己项目的UI库,本博客也不例外,将antd集成了进去。 需要安装antd npm i -S antd antd按需加载 然后因为在第二章中安装了babel-plugin-import,所以我们可以直接用按需加载的方式使用antd的组件: image.png 但是你会发现这样引入的组件缺少样式 image.png 这时候我们需要在jsRules.js文件中添加对应的配置: image.png 另外,因为antd的样式使用的是less编写而成,所以我们需要额外安装less和less-loader npm i -D less less-loader 然后在styleRules.js中添加对less文件的支持,注意less-loader4.0以后的版本在这里的javascriptEnabled一定要为true,否则因为无法开启js编译而导致报错: image.png 最后回到页面中会发现样式引入也ok了: image.png

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):