我使用的一些第三方模块有自己的CSS文件。我想将它们包含在我的应用程序的一个单一的CSS文件中,该文件由Webpack处理。如何将“node_modules”下的CSS文件导入到我的CSS文件中?
例如,我正在使用第三方react-select
模块,但我无法从node_modules
导入其CSS文件:
@import 'react-select/dist/react-datetime.css';
webpack.config.js
中的相关加载器:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
url: false
}
}
]
})
}
4条答案
按热度按时间tcbh2hod1#
您可以导入相对于项目根目录的文件(从根目录解析
node_modules/
),方法是使用波浪线~
作为前缀:这是一个缺乏文档记录的Webpack(一个多余的短语)约定,请参见https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311和What does a
~
tilde in a CSSurl()
do?hmmo2u0o2#
我今天遇到了类似的问题。毕竟,我所要做的就是在我的webpack配置文件中添加configure
resolve
。我希望这将帮助某人。我使用的Webpack版本:
在webpack配置文件中,应配置以下内容:
或
在css文件中,我们可以通过从
node_modules
开始的相对路径访问库:gmxoilav3#
如果您使用了一个node_modules文件夹中的太多内容,您还可以通过传递以下选项来创建别名
配置完成后,您可以像在问题中尝试的那样导入。
juzqafwq4#
我使用Webpack 5。我也一直有一个问题,无法从外部库导入外部.css文件。我尝试将
resolve:[...]
属性添加到我的webpack.config.js
文件中,以及其他尝试,但所有这些都无济于事:webpack没有注入样式。然后我发现了一个如下的hack:我没有以通常的import "external-lib/style.css"
方式导入.css(在我的情况下这对我没有帮助),而是按如下方式进行了命名导入:console.log语句将打印
undefined
,但这个技巧在我的例子中奏效了。外部样式被注入到my.html文档的<style><style/>
标记中。