wake-up-neo.com

Importieren Sie CSS aus "node_modules" in Webpack

Einige Module von Drittanbietern, die ich verwende, haben ihre eigenen CSS-Dateien. Ich möchte sie in die einzige CSS-Datei meiner App aufnehmen, die von Webpack verarbeitet wird. Wie können CSS-Dateien unter "node_modules" in meine CSS-Datei importiert werden?

Ich verwende beispielsweise das Drittanbieter-Modul react-select, Kann aber die CSS-Datei nicht aus node_modules Importieren:

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

Der entsprechende Lader in webpack.config.js:

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

Sie können Dateien relativ zum Stammverzeichnis Ihres Projekts importieren (Auflösen von node_modules/ aus dem Stammordner) durch das Präfixieren einer Tilde ~:

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

Dies ist eine schlecht dokumentierte Webpack-Konvention (ein redundanter Satz), siehe https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 und What macht eine `~` Tilde in einem CSS `url ()`?

37
Andy Ray

Wenn Sie zu viele Objekte aus einem node_modules-Ordner verwenden, können Sie auch einen Alias ​​erstellen, indem Sie diese folgende Option verwenden

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')
    ]
}

Nach der Konfiguration können Sie importieren, wie Sie es in Ihrer Frage versucht haben.

0
Viral