react+webpack+scss 怎么编译css独立文件

html-css013

react+webpack+scss 怎么编译css独立文件,第1张

处理scss文件需要 sass-loader

npm install sass-loader node-sass --save-dev

【注】 以下配置中需要用到的模块,请自行安装

extract-text-webpack-plugin

postcss-loader

precss

autoprefixer

然后在webpack.config.js文件做以下配置

//css文件提取器需要的插件var ExtractTextPlugin=require('extract-text-webpack-plugin')//postcss-loader 需要的配置项var precss = require('precss')var autoprefixer = require('autoprefixer')module.exports = { ... module: {loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader','sass')}] }, postcss: function () {return [precss, autoprefixer] }}

F12使用

开发者工具

或者在网页上右键

审查元素,在左上或者左下(根据版本)的放大镜至你要查看的元素上点击一下右边会有csss样式的具体参数。

如果是扒站,整个css带走,可以切换至资源界面(Resources)查看Stylish下拉栏。点击一个个的直接可以拿走