我正在学习将BlueprintJS集成到我的React Web应用程序中,并且在某些CSS模块中加载时遇到很多麻烦。
我已经安装npm install @blueprintjs/core
和npm install react-transition-group
。
BlueprintJS入门文档说可以这样加载CSS文件:
// or, using node-style package resolution in a CSS file:
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
我目前正在使用webpack
自己的构建工具,因此在我的产品中加入了以下配置webpack.config.js
:
但是,当我尝试构建自己的时bundle.js
,在包含~@blueprintjs/icons/lib/css/blueprint-icons.css
文件时收到以下错误消息:
ERROR in ./node_modules/@blueprintjs/icons/resources/icons/icons-16.eot
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css 7:296-341
@ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./js/styles/styles.scss
@ ./js/styles/styles.scss
@ ./js/app.js
@ multi ./js/app.js
但是,在核心blueprint.css
文件中导入时,我没有收到此错误。错误消息似乎表明我的装载程序在解析~
符号时遇到了问题。但是,我不明白为什么解析前面的行(@import "~@blueprintjs/core/lib/css/blueprint.css";
)没有问题。
有人可以引导我朝正确的方向解释为什么会发生此错误吗?
在查看了错误的确切来源之后./node_modules/@blueprintjs/icons/resources/icons/icons-16.eot
,我意识到webpack无法加载.eot
文件,因此出现了Module parse failed: Unexpected character '' (1:0)
错误消息。
对我而言,这里的问题是没有合适的装载机。有一堆.eof
和.woff
文件蓝图内部使用需要特殊装载机(file-loader
和url-loader
)。
{
test: /\.(ttf|eot|svg)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[hash].[ext]',
},
},
},
{
test: /\.(woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
name: 'fonts/[hash].[ext]',
limit: 5000,
mimetype: 'application/font-woff',
},
},
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句