npm - package.jsonメインフィールドを上書きする

Question

私のプロジェクトでは、いくつかのnpmパッケージを使用しています。それらのうちの2つは間違ったmain -fieldを持っています。それらを無効にすることは可能ですか？

私はwebpackを使用します。私は解決策を見つけたhere。

これはメインフィールドで機能しますが、同じパッケージからのCSSファイルも必要です。私はindex.scssファイルの中で~package/css/style.cssと呼んでいます。上記の解決方法では、path/to/css/style.css（main.jsなし）の代わりにpath/to/main.js/css/style.css（main.jsを使用）のパスを解決します。

私はそれを直接参照することができます../node_modules/path/to/css/style.cssしかし、私はそれが醜いと思います。

このメインフィールドをオーバーライドするためにwebpackまたはnpmを使用する他の解決策がありますか？

- EDIT -

私はパッケージとしてbootstrap-treeview使用。私はindex.scssのようにそれを参照してください @import '~bootstrap-treeview/src/css/bootstrap-treeview.css';のように。これは機能します。

webpack import 'bootstrap-treeview';ではエイリアスとして'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js')を追加しても、CSSは動作しません（上記の説明のとおり）。

- EDIT 2 -

webpack.conf.js：

resolve: { 
    extensions: ['', '.js'], 
    modulesDirectories: ['node_modules'], 
    alias: { 
    // bootstrap-treeview alias 
    'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js') 
    } 
}, 
module: { 
    loaders: [ 
    { 
     test: /\.css$/, 
     loaders: [ 
     'style-loader', 
     'css-loader?sourceMap', 
     'postcss-loader' 
     ] 
    }, 
    { 
     test: /\.(scss|sass)$/, 
     loader: 'style-loader!css-loader?sourceMap!postcss-loader!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true 
    } 
    ] 
} 

上記参照index.scss。ブートストラップ・ツリービューの別名を持つ

エラー：別名なし

Module not found: Error: Cannot resolve 'file' or 'directory' /home/ekf/develop/generator-angular-webpack/node_modules/bootstrap-treeview/src/js/bootstrap-treeview.js/src/css/bootstrap-treeview.css in ... 

がエラー：

Module not found: Error: Cannot resolve module 'bootstrap-treeview' in ... 

Answer 1

問題がある場合だけ

のWebPACKのSCSSローダーの設定

module: { 
    loaders: [ 
     { 
      test: /\.css$/, 
      exclude: /node_modules/, 
      loader: "style-loader!css-loader" 
     }, 
     { 
      test: /\.scss$/, 
      exclude: /node_modules/, 
      loader: "style-loader!css-loader!sass-loader" 
     } 
    ] 
} 

Answer 2

にそのよJSエイリアスは、JSとCSSの共通の祖先を指すのではなく、JSファイルを直接指しています。 import Treeview from "bootstrap-treeview"にできるのはいいと便利ですが、それはあなたが説明している問題につながります。

代わりに、あなたはより高いレベルの別名を指定できます。

resolve: { 
    alias: { 
    // bootstrap-treeview alias 
    'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src') 
    } 
}, 

をしてimport Treeview from "boostrap-treeview/js/bootstrap-treeview.js"としてJSを取得します。これにより、CSSをrequire("bootstrap-treeview/css/bootstrap-treeview.css")とすることができます。

Webpackが~/css/のCSSファイルと~/js/のJSファイルを検索するようにWebpackに指示することはできますが、それは（IMHO）少しの利益のためにもっと魔法を加​​えるでしょう。