Css 如何部署导入自己样式表的ReactJs组件？

我正在开发一个大型React组件，希望将其导入另一个React应用程序。我本可以把它作为一个大应用程序来完成，但我决定将这个组件分离成一个独立的项目，这样我就可以单独关注这个组件了。它使用自己的样式表，并使用require'path/to/stylesheet.[s]css'将其拉入

为了便于开发，我使用WebpackDevServer为其提供服务，它负责加载和预处理这些样式表。我的问题是，我不知道如何部署该组件，以便在浏览器遇到对requirepath/to/stylesheet的调用时，另一个应用程序可以包含它而不会中断

我发现了很多例子，其中项目使用WebpackDevServer进行开发，但直接调用babel或其他预处理器以便将组件部署到dist/目录，因此这似乎是一种常见的做法。但是，对于require'path/to/stylesheet.[s]css'的调用该怎么办呢？如果没有webpack和它的加载程序，它们都会失败

理想情况下，我希望能够使用webpack进行开发和生产。然后我可以将我的组件作为一个完整的包进行部署，css将包含在代码中。我早些时候试过，但没用。它还有一个缺点，就是主应用程序很难超越组件中的样式

我想另一种方法可能是设置我的管道，以便main.scs包含所有其他样式表，并让Sass输出消费应用程序必须单独包含的单个style.css文件。不那么优雅，但它更容易覆盖这些样式

---

我仍在掌握React及其生态系统，因此我想知道这方面的最佳实践是什么，以防有人知道。

您需要运行webpack并捆绑所有JS/CSS，以便在其他项目中使用。如果使用正确的加载程序，CSS将直接绑定到JS包中。或者，您可以使用不同的加载程序让webpack生成一个漂亮的style.css文件，该文件将所有require/path/to/css绑定到一个文件中

你需要做三到四件基本的事情webpack@3.*:

使用webpack配置文件中的externals排除package.json依赖项列表中的库。 使用babel loader传输大多数浏览器支持的javascript ES2015。 使用“样式加载器”、“css加载器”和“sass加载器”将css/SCS绑定到Web包js绑定中。这假定您没有使用服务器端react呈现。这有点棘手。您需要使用同构样式加载器。 或者，使用extract text webpack插件将css拉出到单独的文件中。在下面的示例中注释掉 确保将bundle.js文件作为package.json的入口点

下面是一个很好的示例，说明您正在尝试执行的操作：此示例适用于服务器端渲染和浏览器渲染。BABEL_ENV允许我们只需要浏览器上的css文件

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

const env = process.env.NODE_ENV;
console.log('Environment: ', env)
module.exports = {
  devtool: 'source-map',
  entry: env == 'production' ? './src/components/index.js' : './src/index.js',
  output: {
    path: env !== 'production' ? require('path').resolve('./dev'): require('path').resolve('./dist'),
    filename: 'bundle.js',
    publicPath: '/',
    library: 'reactPorto',
    libraryTarget: 'umd'
  },
  externals: env == 'production' ? [
    'jquery',
    'react',
    'react-dom',
    'react-bootstrap',
    /^react-bootstrap\/.+$/,
    'classnames',
    'dom-helpers',
    'react-owl-carousel',
    'react-owl-carousel2',
    'uncontrollable',
    'warning',
    'keycode',
    'font-awesome'
  ] : [],
  devServer: {
    inline: true,
    contentBase: './dev',
    staticOptions: { index: 'test.html' },
    historyApiFallback: {
      rewrites:[{ from: /./, to: 'test.html' }],
    },
    hot: true,
  },
  plugins: [
    // new ExtractTextPlugin({
    //   filename: 'style.css',
    //   allChunks: true
    // }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(env || 'development'),
        'BABEL_ENV': JSON.stringify(env || 'development')
      }
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    ...(env != 'production' ? [new webpack.HotModuleReplacementPlugin()] : []),
    ...(env == 'production' ? [new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } })] : []),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          query: {
            presets: [
              'es2015',
              'react',
              'stage-2',
              ...(env != 'production' ? ['react-hmre'] : [])
            ],
            plugins: []
          }
        }
      },
      {
        test : /(\.css|\.scss)/,
        // exclude: /node_modules/,
        // use : ExtractTextPlugin.extract({
        //   use: [
        //     'isomorphic-style-loader',
        //     {
        //       loader: 'css-loader',
        //       options: {
        //         importLoaders: 1
        //       }
        //     },
        //     'sass-loader'
        //   ]
        // }),
        use: ['iso-morphic-style-loader', 'css-loader', 'sass-loader']
      },
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
      {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
      {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
      {test: /\.(png|jpg|jpeg)/, loader: 'file-loader' }
    ]
  }
}

---

非常感谢！这就是我想做的，但是我的第一次尝试失败了，可能是b/c我忘了添加exclude:node_modules/，并且我找不到其他部署为webpack bundle的React组件示例，我在npm上搜索了searchbar组件。也许我看起来不够认真。我现在要试试这个！仅供参考，这是我到目前为止的webpack.config.js：现在我需要为生产制作一个新的webpack.config.js。没问题，我写了这个回复，没有跟进了解情况。看起来这有用吗？是的。工作得很有魅力！我喜欢网页包！