React可重用的组件库样式未加载

Question

嘿，我需要以下方面的帮助：

• 我正在创建React UI组件库
• 我正在使用webpack和dev构建工作很好，加载scss文件并正确显示组件
• 在生产构建上，创建了JS bundle以及CSS（我使用SCSS）bundle
• 但是当我在另一个React项目中安装库并导入组件时，没有加载CSS（cmp没有样式化），JS工作正常并且组件已呈现但尚未加载样式...

编辑显然这种方法需要在父应用程序项目中手动加载CSS。我想避免哪些。有没有其他方法可以提供在不需要手动加载的情况下在组件级别上解析样式的方案？

这是我的生产webpack配置：

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'

    })

  ]

};

Answer 1

你可以简单地不使用ExtractTextPlugin。

Webpack的整个目的是将资产分组，而不是基于文件类型，而是通过组件透视图。

因此，如果你删除ExtractTextPlugin，你的CSS将包含在你的.js包中。