How to package css files? How to package css files

The content of this article is about how to package css files? The method of packaging CSS files has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css file packaging

Loaders are one of the most important functions of webpack. Different loaders can be used to specifically process different file formats

Loaders are in the module module.

Just give a few examples of how to use Loaders:

• You can convert the writing of SASS files into CSS without using other conversion tools.

• Can convert ES6 or ES7 code into JS code that is compatible with most browsers.

• Can convert JSX in React into JavaScript code.

Note: All Loaders need to be installed separately in npm and configured in webpack.config.js. Let’s briefly review the configuration types of Loaders.

test: An expression used to match the extension of the processed file. This option must be configured;
use: The loader name is the name of the module you want to use. This option also It must be configured, otherwise an error will be reported;
include/exclude: Manually add files (folders) that must be processed or block files (folders) that do not need to be processed (optional);
query: Provide additional information for loaders Set options (optional)

Package css files
Create a css folder in the src directory and create the index.css file in the folder
./src/css/index.css

 body{
      background-color: red;     
      color: white; 
      }

After the CSS file is created, it needs to be imported into It can be packaged only in the entry file. Here we introduce it into entry.js.
/src/entery.js Add the code in the first line:

import css from './css/index.css';

After CSS and introduction are done, we need to use loader to parse CSS files, namely style-loader and css-loader.

style-loader:
It is used to process url() in css files, etc. The URL in npm: https:/ /www.npmjs.com/package/style-loader
Use npm install to install the project: Be careful when installing style-loader and css-loader, their codes are different

npm install style-loader –save-dev

css-loader:
It is used to insert css into the page style tag. URL in npm: https://www.npmjs.com/package/css-loader
Use npm install to install the project:

npm install –save-dev css-loader

After both loaders are downloaded and installed, we can configure our loaders.

Loaders configuration:
webpack.config.js

module:{ 
    rules: [{ 
         test: /\.css$/, 
         use: [ 'style-loader', 'css-loader' ] 
     }] 
 },

There are three ways to write in module
1. use: [ 'style-loader', 'css-loader'
2, loader:['style-loader','css-loader']
3,

use:[{
    loader:'style-loader'},{
    loader:'css-loader'}]

Related recommendations:

Package js and css files in the website

Sometimes the resource file cannot be found after the css reference image is packaged

The above is the detailed content of How to package css files? How to package css files. For more information, please follow other related articles on the PHP Chinese website!