Question

我在项目中使用了一些npm包。其中两个有错误的main字段。是否可以覆盖它们？

我使用webpack。我找到了解决方案here。

这适用于主要字段，但我还需要来自同一个包的css文件。我在~package/css/style.css文件中使用index.scss引用它。使用上面的解决方案，它使用path/to/main.js/css/style.css（使用main.js）而不是path/to/css/style.css（不使用main.js）来解析路径。

我可以直接引用../node_modules/path/to/css/style.css，但我认为这很难看。

还有另一个使用webpack或npm的解决方案来覆盖这个主要字段吗？

- 编辑 -

我使用bootstrap-treeview作为包。我在index.scss中这样推荐它 @import '~bootstrap-treeview/src/css/bootstrap-treeview.css';。这很有效。

当我在webpack 'bootstrap-treeview': path.join(_path, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js')中添加import 'bootstrap-treeview';作为别名时，但css没有（如上所述）。

- 编辑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见上文。

bootstrap-treeview别名错误：

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 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"
        }
    ]
}

Answer 2

问题是你的别名直接指向JS文件，而不是指向JS和CSS的共同祖先。能够import Treeview from "bootstrap-treeview"能够很方便，但却会导致你所描述的问题。

相反，您可以指定更高级别的别名：

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

并将JS作为import Treeview from "boostrap-treeview/js/bootstrap-treeview.js"获取。这允许您将CSS作为require("bootstrap-treeview/css/bootstrap-treeview.css")。

你可能会对它有所了解，并告诉Webpack在~/css/中查找CSS文件，在~/js/中查找JS文件，但这会为（恕我直言）微不足道增加更多魔力。 / p>

npm - package.json覆盖主要字段

2 个答案: