Question

我正在尝试向npm发布一些react组件。如果我从index.js删除样式引用，则webpack构建会正常工作。

如果我使用css参考，则会出现如下错误消息；

> test-package-ui@1.1.3 build D:\GitHub\TestReactJS\Tarnet-UI2
> webpack

Hash: 41b749d6373d65cfbc28
Version: webpack 4.41.3
Time: 643ms
Built at: 12/19/2019 1:56:37 AM
 1 asset
Entrypoint main = index.js
[0] external "react" 42 bytes {0} [built]
[1] ./src/index.js 732 bytes {0} [built]
[5] ./src/containers/App.js 2.14 KiB {0} [built]
    + 3 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'assets/vendors/style' in 'D:\GitHub\TestReactJS\Tarnet-UI2\src'
 @ ./src/index.js 12:0-31
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! tarnet-ui@1.1.3 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the tarnet-ui@1.1.3 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

index.js（这是我的React组件条目文件。资产位于同一文件夹中）

    import React from 'react';
    import "assets/vendors/style" //How to make webpack recognize this?

    import Cards from './components/CardBox';
    import GalleyCard from './components/Cards/Card3';
    import App from './containers/App';

export {App, Cards, GalleyCard}

webpack.config.js：

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react' 
  }
};

Answer 1

根据您的文件结构，您可能需要这样写：

import "../../assets/vendors/style"

../的数量是返回到资产目录的目录的数量。

webpack无法在供应商中找到CSS文件

1 个答案: