前篇见
手动搭webpack + React Hooks + TypeScript + Antd（一）
手动搭webpack + React Hooks + TypeScript + Antd（二）
本篇讲css less的配置与css-module
在home文件夹下新建index.css并随便写入一个css 然后在index.tsx中导入
src/pages/home/index.css
.home {
border: 1px solid #f00;
}
src/pages/home/index.tsx
+ import './index.css';
因为webpack默认只会处理js代码，所以当我们想要去打包其他内容时，让webpack处理其他类型的内容，就要使用相应的loader，loader：是webpack用来预处理模块的，在一个模块被引入之前，会预先使用loader处理模块的内容。
安装 css-loader
yarn add css-loader -D
build/webpack.dev.js
devServer: { ... }
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ include: resolve( '../src'),
+ use: ["css-loader"]
+ }
+ ]
+ },
plugins: [ ... ]
重新run start报错是没有了，但是页面并没有相应的css样式，因为css-loader是处理css的，并不会将处理后的css引入至html中
安装style-loader
yarn add style-loader -D
修改use 后重新run start
build/webpack.dev.js
- use: ["css-loader"]
+ use: ["style-loader", "css-loader"]
但是现在一般使用less 或者sass(这里使用less，因为后面要加载antd)
安装less less-loader
yarn add less less-loader -D
将index.css修改成less再引入，再修改配置后重新run生效
{
test: /\.less$/,
include: resolve( '../src'),
use: ['style-loader', 'css-loader', 'less-loader']
}
src/pages/home/index.less
.home {
border: 1px solid #f00;
.text {
color: #f00;
}
}
但是由于css的全局性，修改了某个文件的css样式，可能其他文件也被修改了，所以需要CSS Modules 修改配置
build/webpack.dev.js
{
test: /\.less$/,
include: resolve("../src"),
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]--[hash:base64:5]",
},
},
},
"less-loader",
],
},
重新run, 然后发现页面的样式没有了
页面样式即生效，但是ts会报找不到less模块，ts中有些文件的结尾不是* .ts，你必须为相应的文件类型声明一个通配符模块。只需将它放在项目中包含的* .d.ts文件中即可。
在type文件夹下新建css-modules.d.ts文件 写入下面声明
types/css-modules.d.ts
declare module '*.less' {
const content: any;
export default content;
}
ts报错即可解决。
如果css样式是.home-index这种，那么引入需要写成className={styles['home-index']}比较麻烦，所以可以这么使用className={styles.homeIndex}
build/webpack.dev.js
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
+ exportLocalsConvention: 'camelCase',
}
一般css不直接放在html的style中，而是通过link引入，安装mini-css-extract-plugin
安装mini-css-extract-plugin
yarn add mini-css-extract-plugin -D
build/config.js
const cssLoaderConfig = [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]--[hash:base64:5]",
exportLocalsConvention: "camelCase",
},
},
},
"less-loader",
];
module.exports = {
cssLoaderConfig,
};
build/webpack.prod.js
+ const { cssLoaderConfig } = require('./config');
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(common, {
mode: "production",
module: {
rules: [
{
test: /\.less$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, ...cssLoaderConfig.slice(1)],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[id].css",
}),
],
});
npm run build后的文件夹
然后cd dist，再npx http-server(没有npx需要全局安装npx)即可在浏览器中浏览prod的运行情况。
一般css放在css文件夹 js放在js文件夹，修改filename即可
build/webpack.prod.js
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[id].[hash].css',
}),
build/webpack.common.js
output: {
path: resolve('../dist'),
filename: 'js/[name].[hash].js',
chunkFilename: 'js/[name].[chunkhash].js',
},
至此，css less css-module已经成功配置，下一章引入img svg等
