1.下载css-loader
npm i -D css-loader style-loader
打包css文件需要用到style-loader和css-loader。
2.在webpack打包文件中配置:
{
test:/\.css$/,
use:['style-loader','css-loader']
}
css-loader 可以打包css代码,style-loader将打包好的代码挂载到页面上。
注意: 需要在要被打包的文件中引入css,否则css文件将不会打包。如果要在css文件里引入其他css文件应使用@important "./xxx";
的语法。
3.运行打包命令进行打包。打包时webpack会先用css-loader将css处理一遍,将处理后的结果传入style-loader。webpack处理loader的顺序与配置文件里写的loader的顺序有关,即后面的loader先被使用,将结果传到前面的loader,最终转化为打包结果。此时css会与js代码混合打包在dist目录下的同一个文件里。
打包css预编译处理语言
sass:
1.下载sass-loader:
npm install sass-loader node-sass --save-dev
2.在webpack配置文件中做如下配置:
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
3.运行打包命令。
给css类名添加前缀(兼容性)
1.下载相应的loader,要用到autoprefixer:
npm install -D postcss-loader autoprefixer
- 在配置文件css-loader中添加代码:
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader','postcss-loader']
}
3.需要新建一个配置文件postcss.config.js
module.exports = {
plugins: [ require('autoprefixer') ]
}
此时所引入的样式为全局样式,在所有的js文件里都能使用。
css模块化打包(让css只在本文件中生效)
点击查看文档档
修改wenbpack配置文件:
{
test:/\.scss$/,
use:['style-loader', {
loader:'css-loader',options:{
modules:true,
localIdentName:"[path][name]__[local]--[hash:base64:5],"//配置打包后的类名
}
},'sass-loader','postcss-loader']
}
然后在js文件中这样引入css:
import Css from './Css.css'
console.log(Css)
此时打印出来的css为一个对象,对象的属性名是css文件里设置的类名。
3.执行打包命令。
此时打包的css文件只能在引入的文件中使用,其他地方则不能使用。
打包字体图标文件
当要引入字体文件时,比如引用阿里巴巴矢量图标库的字体文件。需要先将字体的代码下载下来,然后将字体的css文件粘到自己的项目中。
字体文件的打包配置时,需要的是全局样式。
然后用file-loader
进行打包。
webpack配置文件如下:
此时,如果不写options,代码将会直接打包到dist目录下。
通过配置options
的outputPath
属性,可以将字体文件全部打包到名为font
的文件夹下。
通过配置name
属性可以配置打包后的文件名称。[name]
代表原来的字体文件名称,[ext]
表示原来的后缀名。