PCF 项目没有配置加载器来处理这个文件 CSS答案

【问题标题】：PCF project No loaders are configured to handle this file CSSPCF 项目没有配置加载器来处理这个文件 CSS
【发布时间】：2022-07-06 03:27:26
【问题描述】：

我在 npm 安装了一个 React 时间线库： https://github.com/veysiyildiz/vertical-timeline-component-for-react#readme

npm i vertical-timeline-component-for-react

当我使用时间轴示例时：

import { Timeline, TimelineItem }  from 'vertical-timeline-component-for-react';

<Timeline lineColor={'#ddd'}>
  <TimelineItem
    key="001"
    dateText="11/2010 – Present"
    style={{ color: '#e86971' }}
  >
...

然后我 npm run build。我收到一个错误：

ERROR in ./node_modules/vertical-timeline-component-for-react/dist/TimelineItem.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .body-container {
|   position: relative;
|   margin-left: 30px;

这是我的 webpack.config.cs 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, './CaseJourney/CaseJourneyControl/Pages/CaseJourneyDisplayPage.tsx'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', ".tsx", ".ts", ".js"]
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/, use: ["style-loader", "css-loader"] 
            },
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: "ts-loader",
                        options: {
                            configFile: tsconfigName,
                            transpileOnly: true,
                        },
                    },
                ],
                exclude: /node_modules/,
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

【问题讨论】：

标签： reactjs webpack loader

【解决方案1】：

我正在创建一个 PCF 项目。在我的 package.json 中，我有：

  "scripts": {
    "build": "pcf-scripts build",
    "clean": "pcf-scripts clean",
    "rebuild": "pcf-scripts rebuild",
    "start": "pcf-scripts start",
    "refreshTypes": "pcf-scripts refreshTypes"
  },

构建指向 pcf-scripts 构建。

因此，我搜索了如何将 css loader 添加到 pcf 并找到了这个答案： https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/Extending-the-pcf-scripts-webpack/td-p/383173

因此，我去了 node_modules --> pcf-scripts --> webpackConfig.js 然后我将它添加到规则中：

     {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
     }

我再次 npm run build 并且成功了！

【讨论】：