使用Webpack时chosen-js样式未加载，是否需额外导入CSS文件？

没错，要让chosen-js正常显示它的定制样式，你确实需要手动导入对应的CSS文件——这是很多老牌UI组件库的常见情况，尤其是这类基于jQuery的组件，它们的npm包通常不会把CSS自动打包到JS文件中，必须由开发者手动引入才能生效。

具体操作步骤： #

1. 定位chosen-js的CSS文件
   打开项目的node_modules/chosen-js目录，CSS文件一般存放在public子文件夹下（路径类似chosen-js/public/chosen.css），部分版本可能直接放在包的根目录，你可以仔细核对一下。

2. 在项目中导入CSS
   在你的入口JS文件（比如main.js）或者使用chosen的组件文件里，添加导入语句：

   import 'chosen-js/public/chosen.css';
   

   如果你习惯使用require语法，也可以写成：

   require('chosen-js/public/chosen.css');
   

3. 确保Webpack能解析CSS文件
   你的Webpack配置必须包含处理CSS的loader，否则无法识别.css文件。如果还没配置，需要在webpack.config.js中添加如下规则：

   module.exports = {
     // ...其他配置项
     module: {
       rules: [
         {
           test: /\.css$/i,
           use: ['style-loader', 'css-loader'], // style-loader负责把CSS注入DOM，css-loader负责解析CSS文件
         },
         // chosen用到了图标字体，需要额外配置字体文件的解析规则：
         {
           test: /\.(woff|woff2|eot|ttf|otf)$/i,
           type: 'asset/resource',
         }
       ],
     },
   };
   

   别忘了先安装对应的依赖包：

   npm install style-loader css-loader --save-dev
   

额外注意事项： #

• chosen-js依赖jQuery，确保你已经在项目中正确引入了jQuery（可以通过Webpack的ProvidePlugin全局注入，或者在组件内手动导入）。
• 如果找不到CSS文件，可能是安装的版本差异导致的，建议查看chosen-js包内的README文档，里面通常会有样式导入的官方说明。

内容的提问来源于stack exchange，提问作者Allen Wang