antd css module
antd css module
antdを使用してCSS Module構成を行うには、通常、オンデマンドロード+CSS-Moduleを考慮する必要があります.ここではantdがcss方式でcss-moduleをロードしてサポートする方法について説明します.(less方式ロードサポートcss-moduleほら:antd-less-css-module構成)
antd css-module構成は2つの場所に関連する babel.rc webpack.config.js
webpack.config.js
antdを使用してCSS Module構成を行うには、通常、オンデマンドロード+CSS-Moduleを考慮する必要があります.ここではantdがcss方式でcss-moduleをロードしてサポートする方法について説明します.(less方式ロードサポートcss-moduleほら:antd-less-css-module構成)
antd css-module構成は2つの場所に関連する
.babelrc
{
"presets": [
"react",
["es2015",{ "modules": false }],
"stage-2"
],
"plugins": [
"react-hot-loader/babel",
"syntax-dynamic-import",
["import", { "libraryName": "antd", "style": "css" }] // "style": "css"
]
}
webpack.config.js
{
test: /\.css$/i,
exclude: [/node_modules/],
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[name]__[local]--[hash:base64:5]"
}
},
{
loader: "postcss-loader"
}
]
},
{
// antd 。exclude: src, node_modules
test: /\.css$/i,
exclude: [/src/],
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
importLoaders: 1
// modules: true,
// localIdentName: "[name]__[local]--[hash:base64:5]"
}
}
]
},