Style Demo
Webpack4.x+Babel7.x+React16.x環(huán)境下配置CSS兄一、Sass
導(dǎo)入Ant Design UI庫(kù)
Webpack4.x+Babel7.x+React16.x平臺(tái)搭建請(qǐng)點(diǎn)擊觀看上一篇文章
新建項(xiàng)目
按照上一篇文章的方法新建一個(gè)新項(xiàng)目style-demo
配置CSS和Sass支持
- 安裝
sass-loader和node-sass
npm i -D sass-loader node-sass
- 修改webpack.base.conf.js配置文件module屬性
module: {
rules: [
{
loader: require.resolve('file-loader'),
exclude:[/\.js$/,/\.jsx$/,/\.html$/,/\.json$/,/\.scss$/,/\.css$/],
options:{
name:'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.js|jsx$/,
exclude: /node_modules/,// 屏蔽不需要處理的文件（文件夾）（可選）
loader: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader'],
}
]
},
- 新建一個(gè)scss樣式文件厘线，引入測(cè)試（略）
引入Ant Design
- 安裝antd
npm i -S antd
- 安裝babel-plugin-import工具實(shí)現(xiàn)按需加載
npm i -S babel-plugin-import
- 修改webpack.base.conf.js配置文件js的loader部分
{
test: /\.js|jsx$/,
exclude: /node_modules/,// 屏蔽不需要處理的文件（文件夾）（可選）
loader: 'babel-loader',
options:{
plugins:
[
['import', { libraryName: "antd", style: 'css' }],
]
}
},
- 在App.js組件里面引入antd的組件，測(cè)試查看效果（略）
