test
When our webpack rules have nothing configured
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
]
}
};
We imported css into js and found an error because webpack only knew js when packaging the module and did not know what css was, so the loader was needed.
Next we configure css-loader
rules: [
{
test:/\.css$/,
use:['css-loader']
}
]
It was found that it was packaged normally.
At this time, the packaged css code can also be seen in the index.js of dist, but the text does not turn red when the page is opened.
Because css-loader only packages and does not mount, then we add style-loader
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
After packaging, I refreshed the page and found that it turned red, and the css was mounted in the style.
Summarize
- css-loader: enables webpack to recognize
import 'xx.css'and package it into webpack standard modules - style-loader: Use
<style>the css-loader internal style to inject into our HTML page, so it is generally not used alone and relies on the module parsed by css-loader.
Therefore, generally less and scss need to add three loaders.
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}