web-dev-qa-db-fra.com

Importer des CSS à partir de "node_modules" dans Webpack

Certains modules tiers que j'utilise possèdent leurs propres fichiers CSS. J'aimerais les inclure dans l'un, le seul fichier CSS 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 tiers react-select module, mais je ne peux pas importer son fichier CSS à partir de node_modules:

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

Le chargeur correspondant dans webpack.config.js:

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: [
        {
          loader: 'css-loader',
          options: {
            url: false
          }
        }
      ]
    })
  }
webpackwebpack-style-loadercss-loader
21
Donald Taylor

Vous pouvez importer des fichiers relatifs à la racine de votre projet (en résolvant node_modules/ du dossier racine) en préfixant un tilde ~:

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

Il s’agit d’une convention Webpack (expression redondante) mal documentée, voir https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 et Que fait un tilde `~` dans un CSS `url ()`?

37
Andy Ray

Si vous utilisez trop d'éléments d'un dossier node_modules, vous pouvez également créer un alias en passant cette option

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 ce que vous avez essayé dans votre question.

0
Viral