web-dev-qa-db-ja.com

Webpackの「node_modules」からCSSをインポートします

私が使用している一部のサードパーティモジュールには、独自のCSSファイルがあります。アプリの単一のCSSファイルにそれらを含めたいのですが、これはWebpackによって処理されます。 「node_modules」の下のCSSファイルをCSSファイルにインポートするにはどうすればよいですか？

たとえば、サードパーティのreact-selectモジュールを使用していますが、そのCSSファイルをnode_modulesからインポートできません。

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

webpack.config.jsの関連ローダー：

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

チルダnode_modules/を前に付けることで、プロジェクトのルートに関連するファイルをインポートできます（ルートフォルダーから~を解決）。

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

これは文書化が不十分なWebpack（冗長フレーズ）の規則です。 https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 および What CSSの `〜`チルダは `url（）`ですか？

37
Andy Ray

1つのnode_modulesフォルダーからあまりにも多くのものを使用している場合は、次のオプションを渡すことでエイリアスを作成することもできます

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

構成後、質問で試行したとおりにインポートできます。

0
Viral