問題描述
最近筆者最近正在將老的項目遷移至typeseript,項目跑起來之后發(fā)現(xiàn)antd相關(guān)的樣式全部丟失，發(fā)現(xiàn)webpack打包后css相關(guān)的代碼沒有被提取出來，導(dǎo)致antd的樣式全部無效化，原先的webpack配置文件：
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
presets: [
'@babel/react',
'@babel/preset-env'
],
plugins: [
// 給antd做按需加載
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 會加載 less 文件
}],
// 這個拿來做注入代碼優(yōu)化的
['@babel/plugin-transform-runtime',
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}],
// 支持類寫法
"@babel/plugin-proposal-class-properties"
]
}
}
]
},
{
test: /\.(css|scss)$/,
exclude: /node_modules/,
use: [
'isomorphic-style-loader',
// MiniCssExtractPlugin.loader, //自動提取出css
// 'css-loader?modules&localIdentName=[name]__[local]--[hash:base64:5]',
{
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true
}
}
]
},
{
// 專門處理antd的css樣式
test: /\.(css|less)$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'babel-loader!awesome-typescript-loader',
}
]
},
resolve: {
alias: {
// '@apiMap': path.resolve(__dirname, 'map/api.tsx'),
// '@constants': path.resolve(__dirname, 'constants'),
// '@utils': path.resolve(__dirname, 'utils'),
// '@UI': path.resolve(__dirname, 'UIwidgets')
},
extensions: [
'.ts', '.tsx', '.js', '.json'
]
},
}
排查與解決
筆者思考了一下，同時參考網(wǎng)上的相關(guān)帖子，感覺可能是tsx文件中引入antd時按需加載的相關(guān)邏輯出現(xiàn)了問題，typescript下所有的js文件改寫為tsx文件，需要添加新的支持按需加載的插件，即ts-import-plugin,將webpack配置文件修改為如下：
module: {
rules: [
// 處理js的babel loader相關(guān)配置被刪除
{
test: /\.(css|scss)$/,
exclude: /node_modules/,
use: [
'isomorphic-style-loader',
{
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true
}
}
]
},
{
// 專門處理antd的css樣式
test: /\.css$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
options: {
useCache: true,
useBabel: false, // !important!
getCustomTransformers: () => ({
before: [tsImportPluginFactory({
libraryName: 'antd',
libraryDirectory: 'lib',
style: true
})]
}),
},
exclude: [
/node_modules/
]
}
]
},
進行打包之后報錯：
image
發(fā)現(xiàn)是跟解析less文件相關(guān)的bug,接下來我們引入
less-loader,刪除對antd的css配置:
// {
// // 專門處理antd的css樣式
// test: /\.(css|less)$/,
// include: /node_modules/,
// use: [
// MiniCssExtractPlugin.loader,
// 'css-loader',
// ],
// },
{
// 專門處理antd的css樣式
test: /\.(less)$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
},
繼續(xù)報錯：
image
根據(jù)提示，表示less-loader不支持行內(nèi)javascript，要在選項中開啟：
{
// 專門處理antd的css樣式
test: /\.(less)$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true
}
}
}
],
},
網(wǎng)上有些帖子說開啟的配置寫法是這樣的：
// 網(wǎng)上說的這樣改是針對老版本，新版下會報錯
loader: "less-loader",
options: {
javascriptEnabled: true
}
實踐證明這樣的配置寫法在新版less-loader(6.0.0)中是會報錯的。
再次打包，運行成功。
