Css- Loader
安装
npm install --save-dev style-loader css-loader
用法
css-laoder 是解释 @import
和 url()
。
// common.css
html , body {
background: pink;
padding: 0px;
margin: 0px;
background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521820324449&di=2930f7026f4242fdfdabf7b5cc0cac35&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1312%2F04%2F3938137_2886_thumb.jpg');
}
// flex布局
div {
display: flex;
}
// postcss处理后会为其添加兼容各浏览器的前缀
// 当你打开打包后的html文件后,会在head中发现多了些style标签,里面就是你的样式内容
// app.js
import './common/common.css'; // 引入css
// webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 优化处理加快速度
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 这里需要npm安装babel-preset-latest
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ] //可以是数组的格式,指定需要的loader,这里顺序需要注意一下,执行的时候是先执行 css-loader -> style-laoder
// 这里也可以传入参数
}
]
},
options 参数
root
默认是 /
。对于 /
开头的URL, 默认行为是不转义的。
url(/image.png) => url(/image.png)
如果设置了 root 参数 ,那么查询参数将被添加到 URL
前面。
use: [
{
laoder: 'css-loader',
options: {root: '.'}
}
]
// url(/image.png) => require('./image.png')
// root参数不建议使用,使用旧版的即可
url
是否禁用url()解析
默认是false.
url(image.png) => require('./image.png')
url(~module/image.png) => require('module/image.png')
import
要禁用css-loader 解析 @import 可以设置import为false
- 但是提示要谨慎使用,一般没有人会这么做的
modules
modules 会启用 CSS 模块规范。
importLoaders
用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。
var htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 优化处理加快速度
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
exclude: '/node_modules/',
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1 //当css文件中又有引入了其他的css的时候,需要设置一下importLoaders
}
},
{
loader: 'postcss-loader', // 需要npm安装postcss-loader
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')(),
require('autoprefixer')(),
require('cssnano')()
]
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
inject: 'body',
filename: 'index.html'
})
]
}
未完待续,继续学习继续补充哦~