Javascript 响应未加载的可重用组件库样式

大家好，我需要以下方面的帮助：

• 我正在创建React UI组件库

• 我正在使用webpack和dev build，它们工作得很好，scss文件已加载，组件已正确显示

• 在产品构建中，JS包和CSS（我使用SCSS）包一起创建

• 但是，当我在另一个React项目中安装库并导入组件时，CSS未加载（cmp未设置样式），JS工作正常，组件已呈现，但未加载样式

编辑 显然，这种方法需要在父应用程序项目中手动加载CSS。这是我想要避免的。是否有其他方法可以提供这样的场景，即在组件级别上解析样式，而无需手动加载

这是我的生产网页包配置：

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = {

  entry: './src/index.js',

  output: {

    filename: 'bundle.js',

    path: path.join(__dirname, '../lib'),

    libraryTarget: 'commonjs',

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: ['css-loader']

        })

      },

      {

        test: /\.scss$/,

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: ['css-loader', 'sass-loader']

        })

      },

      {

        test: /\.js$/,

        exclude: /node_modules/,

        loader: "babel-loader"

      },

      {

        test: /\.svg/,

        use: {

          loader: 'svg-url-loader',

          options: {}

        }

      }

    ]

  },

  externals: {

    'react': 'commonjs react',

    'react-dom': 'commonjs react-dom',

  },

  resolve: {

    modules: [

      path.resolve('./src'),

      path.resolve('./node_modules')

    ]

  },

  plugins: [

    new ExtractTextPlugin({

      filename: 'ui-library.css'

    })

  ]

};

---

您不能简单地使用

ExtractTextPlugin

Webpack的全部目的不是根据文件类型而是根据组件透视图对资产进行分组

---

因此，如果删除

ExtractTextPlugin

，CSS将包含在.js包中

我看到您正在使用

ExtractTextPlugin

。这个插件将把css从包中提取到单独的文件中。在这种情况下，如果您想让样式正常工作，您可能需要单独加载css文件。谢谢您提供的信息。有没有一种不用手动加载CSS的方法来处理这个问题？你可以在JS框架中使用CSS，比如

样式化组件

，这也是一个合法的信息，但我们考虑过，决定不使用它。现在我想这可能是唯一一个不需要在父应用程序中手动导入CSS的选项。例如，MaterialUI正在使用样式化组件并实现这一点……这是目前足够好的解决方案。下一个最好的方法是在组件级别进行代码拆分，这样我们就可以为每个组件提供一个单独的包。你有什么建议可以让我看看如何做到这一点吗？谢谢你提供的信息，我会将答案标记为已接受。如果你知道代码拆分部分，请尽可能更新答案：）你可以通过有多个条目的Webpack轻松做到这一点。。。每个条目都成为它自己的包（取决于您的配置）。也许你可以用你的网页配置文件和项目树发布另一个问题，这样我就可以看一看了？回答：-）