- 有一段时间没有写笔记了,今天记录一下
- 本用的是react框架,webpack3+sass的配置
- 当前我们在写css样式的,时候总是要处理浏览器兼容问题,那就是加前缀问题,可是我们在开发的时候比如:
.className{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
这样写是不是很烦恼呀,可我就是想写下面这种.
.className{
display: flex;
}
其实我们在真真的开发当前,一般也是以上面那种来写的,然后通过打包及插件,让我们写的样式自动加上各种浏览器下所对应的写法出来。
如果配置呢?
这里用到了webpack、style-loader、css-loader、postcss-loader、sass-loader、autoprefixer
安装插件
npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader autoprefixer
或者用yarn进行安装
yarn add webpack style-loader css-loader postcss-loader sass-loader autoprefixer
个人还是挺喜欢用yarn的。 如何安装及使用可以点击 yarn 。
配置webpack.config.js
- 直接看代码吧
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader', options: {
sourceMap: true, modules: true,
localIdentName: '[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js' // 这个得在项目根目录创建此文件
}
}
},
{
loader: 'sass-loader', options: { sourceMap: true }
}
]
}
]
},
在项目根目录创建 postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
package.json 文件里添加支持哪些浏览器。
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
到这里基本上就可以安心写样式了,不用担心浏览器前缀有没有写了,让webpack自动帮我们打进去。