Question

嘿，我需要帮助以下人员：

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

修改显然，这种方法需要在父app项目中手动加载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包中。

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

1 个答案: