Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to package css files", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to package css files" this article.

Css file packaging

Loaders is one of the most important functions of webpack. Different loader can be used for specific processing of different file formats.

Loaders is in the module module.

Here are a few simple examples of Loaders usage:

You can convert the writing of SASS files to CSS instead of using other conversion tools.

You can convert ES6 or ES7 code into JS code that is compatible with most browsers.

You can convert JSX in React into JavaScript code.

Note: all Loaders needs to be installed separately in npm and configured in webpack.config.js. Let's briefly sort out the configuration type of Loaders.

Test: an expression that matches the extension of the processing file, this option must be configured

Use:loader name, that is, the name of the module you want to use. This option must also be configured, otherwise an error will be reported.

Include/exclude: manually add files that must be processed (folders) or mask files that do not need to be processed (folders) (optional)

Query: provides additional setup options for loaders (optional)

Package css Fil

Create a css folder in the src directory and create an index.css file in the folder

. / src/css/index.css

Body {

Background-color:red

Color:white

}

After the CSS file is established, it needs to be imported into the entry file before it can be packaged. Here we introduce it into entry.js.

Add the code to the first line in / src/entery.js:

Importcssfrom'./css/index.css'

Once the CSS and introduction are done, we need to use loader to parse the CSS file, style-loader and css-loader, respectively.

Style-loader:

It is used to deal with url () in css files, etc., and URL in npm: https://www.npmjs.com/package/style-loader

Use npminstall for project installation: when installing style-loader and css-loader, be sure to pay attention to their different code

Npminstallstyle-loader-save-dev

Css-loader:

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

Use npminstall for project installation:

Npminstall-save-devcss-loader

After both loader 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'}]

The above is all the contents of the article "how to package css files". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.