jsp引入css文件不生效_【webpack实践】配置webpack，支持css

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标签的方式加入）

源码参考：

ZhongJinHacker/react-practise​github.com