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

Question

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

• 我正在创建 React UI 组件库

• 我正在使用 webpack 和 dev build 效果很好，加载了 scss 文件并且组件显示正确

• 在生产构建中，创建 JS 包以及 CSS（我使用 SCSS）包

• 但是，当我在另一个 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 包中。