Install webpack + React Hooks + TypeScript + Antd

See article before

Install webpack + React Hooks + TypeScript + Antd

CSS less configuration and CSS – Module

Create a new index. CSS folder in the home folder and write a random CSS and import it in index. TSX

src/pages/home/index.css

.home {
    border: 1px solid #f00;
}
Copy the code

src/pages/home/index.tsx

+ import './index.css';
Copy the code

Since webPack only handles JS code by default, when we want to pack other content and let WebPack handle other types of content, we should use the corresponding loader, loader: Webpack is used to preprocess modules, using loader to process the contents of a module before it is imported.

Install the CSS – loader

yarn add css-loader -D
Copy the code

build/webpack.dev.js

devServer: { ... }

+ module: {
+    rules: [
+        {
+            test: /\.css$/,
+            include: resolve( '../src'),
+            use: ["css-loader"]
+        }
+    ]
+ },

plugins: [ ... ]
Copy the code

There is no CSS style for the page, because csS-loader handles CSS and does not import the processed CSS into the HTML

Install style – loader

yarn add style-loader -D
Copy the code

Modify use and run start again

build/webpack.dev.js

-  use: ["css-loader"]
+  use: ["style-loader", "css-loader"]
Copy the code

But now it’s common to use less or sass(less here because antD will be loaded later)

Install less less – loader

yarn add less less-loader -D
Copy the code

Change the index. CSS to less and import it. Modify the configuration and run again to take effect

{ test: /\.less$/, include: resolve( '.. /src'), use: ['style-loader', 'css-loader', 'less-loader'] }Copy the code

src/pages/home/index.less

.home { border: 1px solid #f00; .text { color: #f00; }}Copy the code

However, because of the global nature of CSS, if you change the CSS style of a file, other files may also be modified, so you need to modify the configuration of 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", ], },Copy the code

Run again and find that the page style is gone

The page style will work, but ts will not find the less module. Some files in TS do not end in *. Ts, you must declare a wildcard module for the corresponding file type. Simply place it in the *.d.ts file included in your project.

Create a new csS-modules.d. ts file in the type folder and write the following declaration

Refer to TS CSS Model. Failed to find module problems

types/css-modules.d.ts

declare module '*.less' {  
    const content: any; 
    export default content;
}
Copy the code

Ts error can be solved.

If the CSS style is.home-index, it would be troublesome to write className={styles[‘home-index’]}, so use className={styles.homeindex} instead.

build/webpack.dev.js

modules: {
    localIdentName: '[name]__[local]--[hash:base64:5]',
+   exportLocalsConvention: 'camelCase',
}
Copy the code

CSS is not placed directly in the STYLE of HTML, but introduced via link. Install the Mini-CSS-extract-plugin

Install the mini – CSS – extract – the plugin

yarn add mini-css-extract-plugin -D
Copy the code

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,
};
Copy the code

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",
    }),
  ],
});
Copy the code

NPM run build folder

Then CD Dist, NPX HTTP-server (no NPX requires global installation of NPX) can browse the running status of PROD in the browser.

The CSS file is stored in the CSS folder. The JS file is stored in the JS folder

build/webpack.prod.js

new MiniCssExtractPlugin({
    filename: 'css/[name].[hash].css',
    chunkFilename: 'css/[id].[hash].css',
}),
Copy the code

build/webpack.common.js

output: { path: resolve('.. /dist'), filename: 'js/[name].[hash].js', chunkFilename: 'js/[name].[chunkhash].js', },Copy the code

CSS less CSS-Module has been successfully configured. Img SVG is introduced in the next chapter

later

Install webpack + React Hooks + TypeScript + Antd

Build webpack + React Hooks + TypeScript + Antd