flex兼容性之Webpack3+postcss+sass+css

1:⚠️⚠️ 首先安裝依賴 npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader autoprefixer

 

2:而後配置webpack

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 } }

]

　　　　　　　　　　　　}

　　　　　　　　　　]

},

 

3:在項目根目錄建立 postcss.config.js

 

module.exports = { plugins: [ require('autoprefixer') ] };

4:package.json 文件裏添加支持哪些瀏覽器

"browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 6", "last 3 iOS versions" ]；

 

 

待webpack打包以後會自動加上瀏覽器前綴