webpack本身默认是只打包JS的代码的,所以只能支持在Js代码中写样式代码,如果独立成css文件再引入的话就会报错。所以我们需要css-loader和style-loader来帮忙处理
给定代码 app.jsx
import React from 'react'
import './app.css'
class App extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<div style={style.helloWorld} >Hello World!!!!!</div>
<div style={{background: 'green',}}>hello hello hello</div>
<div className='chinese'>一二三四五</div>
</div>
)
}
}
// 组件内使用css
const style = {
helloWorld: {
background: 'red',
width: '200px',
height: '200px'
}
}
export default App
然后是app.css
.chinese {
background-color: blue;
}
当我们不加入css-loader 和style-loader 时,执行运行
从这里可以看出 css文件中的chinese css属性没有生效(一二三四五背景色没变化)。
当我们在webpack.config.js 中添加配置
module: {
rules: [
{
test: /.jsx?$/,
loader: ['babel-loader'],
exclude: /node_modules/,
},
+ {
+ test: /.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
]
},
并在package.json中引入依赖
"devDependencies": {
...
+ "css-loader": "^1.0.0",
+ "style-loader": "^0.21.0"
}
再次执行运行时
发现外部引入css文件就有效了。
css-loader 作用:解释(interpret)@import
和url()
,会import/require()
后再解析(resolve)它们(即将css代码转换为CommonJS模块)。其实就是解释JS引用Css对象的关系,但仅有css-loader是不够的,因为它只是解释了引用关系,但并不难将css文件的内容加载进来
测试可见:
可以看出是找不到app.css的
这时需要style-loader的帮忙,style-loader会获得之前css-loader解释的引用关系,并将css文件中的内容加到了html 的heade标签中(将 JS 字符串生成为 style 节点,以style标签的方式加入)