嘿,我需要以下方面的帮助:

  • 正在创建React UI组件库
  • 我正在使用webpack,并且dev的构建效果很好,加载了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'
    
        })
    
      ]
    
    };
    

    最佳答案

    您根本无法使用ExtractTextPlugin

    Webpack的整个目的不是基于文件类型而是通过组件 Angular 对 Assets 进行分组。

    因此,如果删除ExtractTextPlugin,则CSS将包含在.js bundle 包中。

    10-05 21:00
    查看更多