preface

React – WebPack +React

Following up, the author’s Study-Webpack project already works with React and Typescript. The front end is not only JS but also CSS. This article will cover how WebPack handles CSS

Address of the file

Making the address

Support CSS

Installing dependency packages


npm i style-loader css-loader -D

Copy the code
  • Css-loader: if CSS is imported into JS, it is necessary to use CSS-loader to identify the module, convert the content according to specific syntax rules, and finally export the module. 3
  • Style-loader: creates a style tag from a JS script that contains some styles. Style-loader cannot be used alone because it is not responsible for resolving CSS dependencies. The functions of each loader are single and separate. 3

Modify webpack.com mon. Js

 module: {
    rules: [{// other
      },
      {
        test: /\.(css)$/,
        use: ["style-loader"."css-loader"],},],},Copy the code

Modify the SRC/Home. JSX

import React from "react"

import "./Home.css"
type Props = {}

export default function Home({}: Props) {
  return <div className="box">I am a typescript</div>
}
Copy the code

Since SRC /home/jsx introduces home.css, create a new home.css file in the root directory

A new Home. The CSS

.box {
  color: red;
}
Copy the code

Rerun the

npm start
Copy the code

In your browser, you should see something like this:

Code address: CSS support

Less and SASS are supported

In the development process, the author will use some CSS precompilation tools such as LESS, sass, how to make Webpack support less, sass?

Install dependencies

npm i less less-loader sass sass-loader -D
Copy the code

Modify webpack.com mon. Js

 module: {
    rules: [{// other
      },
      {
       // other
      },
      {
        test: /\.(less)$/,
        use: ["style-loader"."css-loader"."less-loader"],}, {test: /\.(scss)$/,
        use: ["style-loader"."css-loader"."sass-loader"],},],},Copy the code

Modify the SRC/Home. TSX

import React from "react"

import "./Home.css"
import "./style.less"
import "./style.scss"
type Props = {}

export default function Home({}: Props) {
  return <div className="box">I am a typescript</div>
}
Copy the code

Less and style. SCSS files are introduced in SRC/home. TSX, so you need to create these two files and edit the following code

The new style. Less

.box {
  background: blue;
}
Copy the code

The new style. SCSS

.box {
  border: 1px solid green;
}
Copy the code

Project catalogue

The following figure shows the location of the newly created file

To perform

Re-execute NPM start and you should see something like this in your browser

This code address: support less, SASS

PostCSS

Click on me if you don’t know PostCSS

PostCSS is a tool for converting CSS code with JavaScript tools and plug-ins

PostCSS usage instructions

Installing dependency packages

npm i postcss-loader autoprefixer -D
Copy the code

Modify webpack.com mon. Js

 module: {
    rules: [{// other
      },
      {
        test: /\.(css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader".options: {
              importLoaders: 1,}}, {loader: "postcss-loader",},],}, {// other},],},Copy the code

New postcss. Config. Js

Some configurations are required for postcss to take effect. By default, postcss-loader uses the postcss.config.js file in the root directory

Create a new postcss.config.js root directory and write the following code:

module.exports = {
  plugins: [require("autoprefixer")]},Copy the code

The directory structure

Modify the SRC/Home. CSS

.box {
  display: flex;
  color: red;
  justify-content: center;
}
Copy the code

Modify the package. The json

  "dependencies": {
   // other
  },
  "browserslist": [
    "0.2%" >."not dead"."ie >= 9"."not op_mini all"
  ]
Copy the code

Rerun the

In the browser console, you can see that postCSS is in effect, as shown below

conclusion

This article is minimal and will only cover how to use these dependencies, not why or what they do. However, there are many links to citations in the article, which readers can refer to themselves if they are interested.

The author’s water quality is limited, and the explanation or explanation is wrong

reference

1.style-loader

2. Principles and functions of the relationship between CSS-loader and style-loader

3. Difference and use of CSS-loader and style-loader

4.less-loader