Importer CSS de "node_modules" dans Webpack

Question

Certains modules tiers que j'utilise ont leurs propres fichiers CSS. Je voudrais les inclure dans le fichier CSS unique de mon application, qui est traité par Webpack. Comment importer des fichiers CSS sous "node_modules" dans mon fichier CSS?

Par exemple, j'utilise le module tiers react-select , mais je ne peux pas importer son fichier CSS de node_modules :

 @import 'react-select/dist/react-datetime.css';
 

Le chargeur concerné en webpack.config.js :

   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: [
        {
          loader: 'css-loader',
          options: {
            url: false
          }
        }
      ]
    })
  }
 

Answer 1

Vous pouvez importer des fichiers relative à votre racine du projet (résoudre node_modules/ à partir du dossier racine), en préfixant avec un tilde ~:

@import '~react-select/dist/react-datetime.css';

C'est un peu documentés Webpack (redondant expression) de la convention, voir https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 et Qu'est-a `~` tilde dans un CSS `url()` faire?

Answer 2

Si vous utilisez trop de choses à partir d'un dossier node_modules, vous pouvez également créer un alias en passant cette option suivante

 options: {
    url: false,
    includePaths: [
        // this one for using node_modules as a base folder
        path.resolve('node_modules'),
        // this one for using sass as the base folder
        path.resolve('node_modules/flag-icon-css/sass')
    ]
}
 

Après la configuration, vous pouvez importer comme vous essayiez dans votre question.