1

我正在尝试创建一个包含可重用反应组件的库。我正在使用 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: [...但没有用

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

import { MyComponent } from 'MyLib';

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

在我的库中，我有一些index.ts导出组件的文件。
除了没有CSS之外，该组件一切正常

4

2 回答 2

0

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

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

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

传递一个字符串（即使用：['style-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
        }
      }
    ]
  },
]},

我希望它对你有帮助。

于 2019-05-17T19:06:04.210 回答
0

最后我用阿芙罗狄蒂切换到 JS 中的 CSS
这不是我想做的，但它现在可以完成工作

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

于 2019-05-20T07:50:31.303 回答