在我的项目中,我正在使用antd react组件库,并且需要使用ts-loader以合理的方式加载组件。现在,我正在尝试搏击webpack来转译less文件,但出现以下错误:
ERROR in ./node_modules/antd/lib/button/style/index.less
Module build failed: Error: Cannot find module 'less'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
...
似乎未安装Less-loader(是)或未正确配置(应该是)。这是我的webpack配置:
webpack.dev.js
module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
loader: 'less-loader' // compiles Less to CSS
},
]
},
common.webpack.js
const getTsLoaderRule = env => {
const rules = [
{ loader: 'cache-loader' },
{
loader: 'ts-loader',
options: {
transpileOnly: true,
getCustomTransformers: () => ({
before: [ tsImportPluginFactory({
libraryDirectory: 'es',
libraryName: 'antd',
style: 'css',
})]
}),
compilerOptions: {
module: 'es2015'
}
},
}
];
if (env === 'development') {
rules.unshift({
loader: 'react-hot-loader/webpack'
});
}
return rules;
};
...
module: {
rules: [
{
test: /\.tsx?$/,
use: getTsLoaderRule(options.env),
include: [utils.root('./src/main/webapp/app')],
exclude: ['node_modules']
},
{
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
loaders: ['file-loader?hash=sha512&digest=hex&name=content/[hash].[ext]']
},
{
enforce: 'pre',
test: /\.jsx?$/,
loader: 'source-map-loader'
},
{
test: /\.tsx?$/,
enforce: 'pre',
loaders: 'tslint-loader',
exclude: ['node_modules']
}
]
},
有什么想法吗?
答案 0 :(得分:0)
该错误消息并非与错误配置的less-loader
有关,而是与丢失的less
有关,后者是软件包的对等依赖项。运行npm i -S less
进行安装。