Question

我正在尝试创建一个具有可重用的react组件的库。我正在使用React，Typescript，Sass和Webpack。

我的问题是：当我使用webpack构建结果中的组件时，虽然我有一个index.css文件，其中包含了我所需的一切，但它们却没有CSS。
似乎输出未使用css。

这是我的webpack.config.json：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, '../src/index.ts'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'index.js',
    library: 'whatever',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  devtool: 'source-map',
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
  module: {
    rules: [
      {
        test: /\.tsx?/,
        loader: 'ts-loader',
        options: {
          configFile: path.resolve(__dirname, '../tsconfig.build.json')
        },
        exclude: /node_modules/
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              camelCase: true,
              sourceMap: false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: false
            }
          }
        ]
      },
    ]
  },
  resolve: {
    modules: ["node_modules", "src"],
    extensions: ['.tsx', '.ts', '.scss', '.js']
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'index.css',
      chunkFilename: '[id].[hash].css',
    }),
  ]
};

这是我的tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": [ "es2015", "dom" ],
    "outDir": "./dist",
    "sourceMap": true,
    "moduleResolution": "node",
    "declaration": true,
    "strict": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.stories.tsx",
    "src/**/*.test.tsx"
  ]
}

编辑1： 按照 Muhammad Mehar 的建议，我将loader: [MiniCssExtractPlugin.loader, ...更改为use: [...，但没有用

这是我尝试使用我的lib的方式：
somewhereInTargetApp.ts

import { MyComponent } from 'MyLib';

export const OtherComponent = (props) => {
   return (
       <MyComponent someProp={'Hello world'}/>
   )
};

在我的lib中，我有一些index.ts文件可以导出组件。
除了没有css之外，所有组件都可以正常工作

Answer 1

Rule.loader 是Rule.use的快捷方式：[{loader}]。

传递字符串（即loader：'style-loader'）是loader属性的快捷方式（即，使用：[{loader：'style-loader'}]）

Rule.use 可以是应用于模块的UseEntry数组。每个条目都指定要使用的加载程序。

传递字符串（即使用：['style-loader']）是loader属性的快捷方式（即使用：[{loader：'style-loader'}]）

可以通过传递多个加载器来链接加载器，这些加载器将从右到左（最后配置到第一个配置）应用

尝试一下：

module: {
rules: [
  {
    test: /\.tsx?/,
    loader: 'ts-loader',
    options: {
      configFile: path.resolve(__dirname, '../tsconfig.build.json')
    },
    exclude: /node_modules/
  },
  {
    test: /\.s(a|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]',
          camelCase: true,
          sourceMap: false
        }
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: false
        }
      }
    ]
  },
]},

希望对您有帮助。

Answer 2

最后，我用aphrodite切换到JS中的CSS
这不是我想要做的，但现在可以完成工作

如果有人对我的问题有答案，我很乐意对其进行测试

创建一个React组件库

2 个答案: