webpack可以将不同的文件都按照模块的方式进行处理，比如js，css等都可以通过不同的loader进行打包处理。
CSS
webpack为我们提供css-loader和 style-loader两个工具来处理样式表，他们二者处理的任务是不同的。
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能。
style-loader将所有的计算后的样式加入页面中。
这二者组合在一起可以使你能够把样式表嵌入webpack打包后的JS文件中。
我们接着上面的例子来配置这两个工具：
安装
npm install --save-dev css-loader
npm install --save-dev style-loader
本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击回到上文
配置
在webpack.config.js中配置这两个工具
module.exports = {
...
module: {
rules: [
...
{ // 这里配置这两个工具
test: /\.css$/,
exclude: /node_modules/,
use: [ // 请注意这里对同一个文件引入多个loader的方法。
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
}
接下来，在app文件夹里创建一个名字的main.css的文件，对一些元素设置样式
image.png
在
main.css文件内填入样式
body{
background-color: red;
border: 5px solid yellow;
}
ul, li{
list-sytle:none;
}
然后我们要怎么用这个样式呢？，我们知道我们的例子中有一个webpack的入口，没错那就是main.js，为了让webpack能找main.css文件，我们要将这个样式导入到main.js中，其它的模块需要通过 import, require, url等与入口文件建立其关联。
main.js文件修改如下：
import React from 'react';
import {render} from 'react-dom';
import App from './App';
import './main.css'; // 使用require导入css文件
render(<App />, document.getElementById('root'));
通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。
CSS module
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，那么如果我们设置的相同class名称较多的时候，那么可想而知页面会从在声明现象，用一个比较官方的词就是它会造成全局污染。
CSS module功能就是将JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块，这样做有效避免了全局污染。
接下来我们在来改动下webpack.config.js配置文件
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
// 指定css的嘻哈类名格式
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
]
}
]
}
}
我们在app文件夹下创建一个App.css文件，并填入以下代码来进行一下测试
image.png
.root {
height: 30px;
background-color: green;
margin-top: 20px;
border: 2px solid blue;
}
将App.css导入App.js
import React, {Component} from 'react'
import config from './config.json';
import styles from './App.css'; // 导入
class App extends Component{
render(){
return (
<div className={styles.root}>
{config[0].text}
</div>
)
}
}
export default App
我们看下页面运行结果
image.png
image.png
CSS预处理器
Sass和 Less之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables,nesting,mixins,inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句。
以下是常用的CSS 处理loaders
Less LoaderSass LoaderStylus Loader
不过其实也存在一个CSS的处理平台-PostCSS，它可以帮助你的CSS实现更多的功能，在其官方文档可了解更多相关知识。
举例来说如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀
第一步 安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader
npm install --save-dev autoprefixer
第二步 在根目录新建postcss.config.js并添加如下代码
image.png
module.exports = {
plugins: [
require('autoprefixer')
]
}
第三步 在webpack.config.js中配置babel-loader
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
use: [
...
{
loader: "postcss-loader"
}
]
}
]
}
}
最后 重新使用npm start打包，你写的css会自动根据Can i use里的数据添加不同前缀了。
网友评论