npm - package.json override main field

问题

I use some npm packages in my project. Two of them have the wrong main-field. Is it possible to override them?

I use webpack. I found a solution here.

This works for the main field but I also need a css-file from the same package. I refer it with ~package/css/style.css in my index.scss file. With the solution above it resolves the path with path/to/main.js/css/style.css (with main.js) instead of path/to/css/style.css (without main.js).

I could refer it directly ../node_modules/path/to/css/style.css but I think thats ugly.

So is there an other solution with webpack or npm to override this main field?

-- EDIT --

I use bootstrap-treeview as package. I refer it in index.scss like so @import '~bootstrap-treeview/src/css/bootstrap-treeview.css';. This works.

When I add 'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js') as alias in webpack import 'bootstrap-treeview'; works but the css not (as describes above).

-- 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 see above.

Error with bootstrap-treeview alias:

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 ...

Error without alias:

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

回答1:

just in case

webpack scss loader config

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

回答2:

The problem is that your alias points directly to the JS file, instead of pointing to the common ancestor of both the JS and the CSS. It's nice and convenient to be able to import Treeview from "bootstrap-treeview" but it leads to the problem you're describing.

Instead, you could specify a higher level alias:

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

and get the JS as import Treeview from "boostrap-treeview/js/bootstrap-treeview.js". This allows you to get the CSS as require("bootstrap-treeview/css/bootstrap-treeview.css").

You might be able to get clever about it and tell Webpack to look for CSS files in ~/css/ and JS files in ~/js/ but that would be adding more magic for (IMHO) little gain.

来源：https://stackoverflow.com/questions/38610824/npm-package-json-override-main-field

标签

npm

Webpack

package.json