为什么在我引用antd的时候,还需要在webpack中再次less-loader解析antd的样式?
利用webpck-dev-server构建
webpack config见下,在less解析中,如果不解析antd样式,会报出如下错误
ERROR in ./node_modules/antd/lib/message/style/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import "../../style/themes/default";
| @import "../../style/mixins/index";
|
此处webpack配置
const path = require('path')
const webpack = require('webpack')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const webpackConfig = {
entry: './example/index.js',
output: {
path: '/',
filename: '[name].[hash:7].js'
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'src': path.resolve(__dirname, '../src'),
'example': path.resolve(__dirname, '../example')
},
modules: ['../src/components', 'node_modules']
},
devServer: {
host: '0.0.0.0',
port: 6666,
publicPath: '/',
noInfo: true
},
module: {
rules: [
{
test: /\.(jsx?| js)$/,
loader: 'babel-loader',
include: [resolve('example'), resolve('src')],
query: {
presets: ['env', 'stage-0', 'react'],
plugins: [
'babel-plugin-transform-decorators-legacy',
'transform-class-properties',
['import', {
'libraryName': 'antd',
'style': true
}],
'transform-runtime',
'transform-object-rest-spread'
]
}
},
{
test: /\.(less|css)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
}
],
include: [resolve('example'), resolve('src'), resolve('node_modules/antd/lib')]
// exclude: /(node_modules)/
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
}
module.exports = webpackConfig
但如果解析antd样式,服务直接卡死,求大神指导
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论