转自:https://blog.csdn.net/xiaotuni/article/details/78014852
如果配置呢?
这里用到了webpack、style-loader、css-loader、postcss-loader、sass-loader、autoprefixer
安装插件
npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader autoprefixer
配置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自动帮我们打进去。