Question

我有一个“组件库”，它是一个独立的软件包。该软件包导入“ bootstrap-sass”。它将构建sass文件，该文件可以导入“ bootstrap-sass”而不会出现任何问题。

但是，我随后有了我的“实施项目”，该项目导入了“组件库”，并因此导入了“ bootstrap-sass”。该项目从“ component-library”导入主sass文件，因此也从“ bootstrap-sass”导入。

但是，当前失败，出现以下错误：

./ src / styles / app.scss中的错误（./node_modules/css-loader??ref--8-1!./node_modules/sass-loader/lib/loader.js??ref--8-2!./src/styles/app.scss）找不到模块：错误：无法解决 'bootstrap-sass / assets / fonts / bootstrap / glyphicons-halflings-regular.eot' 在“ C：\ inetpub \ wwwroot \ implementation-project \ src \ styles”中

我在“ component-library”中包含以下软件包：

"devDependencies": {
    "bootstrap-sass": "^3.3.7"
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8"
 }

我在“组件库”中使用以下webpack配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader' 
      }
    },
    { test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=8192' },
    { test: /\.(eot|ttf)$/, loader: 'file-loader' },
    {
      test: /\.scss$/,
      use: [{
        loader: MiniCssExtractPlugin.loader,
      }, {
        loader: "css-loader", 
        options: { sourceMap: true }
      }, {
        loader: "sass-loader", 
        options: { sourceMap: true }
      }]
    }
  ]
},
plugins: [ 
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
]

下面的sass在我的“组件库”中定义：

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/" !default;
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

如上所述，它们构建良好。 但是，将其导入到我的实现库中是行不通的。

我的“实现库”中包含以下软件包：

"devDependencies": {
  "css-loader": "^0.28.11",
  "file-loader": "^1.1.11",
  "mini-css-extract-plugin": "^0.4.1",
  "node-sass": "^4.9.2",
  "sass-loader": "^7.0.3",
  "style-loader": "^0.21.0",
  "url-loader": "^1.0.1",
  "webpack": "^4.15.0",
  "webpack-cli": "^3.0.8"
},
"dependencies": {
  "component-library": "1.0.0"
}

我的“实现库”中具有以下Webpack设置：

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
      { test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=8192' },
      { test: /\.(eot|ttf)$/, loader: 'file-loader' },
      {
        test: /\.scss$/,
        use: [{
          loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
        }, {
          loader: "css-loader", 
          options: { sourceMap: true }
        }, {
          loader: "sass-loader", 
          options: { sourceMap: true }
        }]
      }
    ]
  },
  plugins: [ 
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]

我将“ component-library”中的sass包括在内，如下：

@import "~component-library/lib/styles/app";

当我不在“ component-library”中导入bootstrap-sass时，一切都正常。但是当我这样做时，构建就会失败。

我想知道是否可能必须覆盖“实现库”中的“ $ icon-font-path”，但是我不确定该怎么做？在“实现库”中安装“ bootstrap-sass”可以解决我的问题（因为编译器现在可以在预期的位置找到字形），但这似乎很麻烦。

任何建议，我都是webpack的新手。

使用webpack

0 个答案: