PCF项目没有配置用于处理此文件CSS的加载程序

Question

I NPM安装了一个反应时间表库： https://github.com/veysiyildiz/vertical-timeline-component-反应＃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' }}
  >
...

然后i npm run构建。我有一个错误：

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"
         })
    ]
}

Answer 1

我正在创建一个PCF项目。
在我的软件包中

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

。

因此，我搜索了如何将CSS加载器添加到PCF，并找到了此答案：
https://powerusers.microsoft.com/t5/power-apps-pro-dev-isv/extering-the-pcf-scripts-webpack/td-pback/td-p/383173

因此，我去了NODE_MODULES - ＆gt; pcf-scripts-＆gt; WebPackConfig.js
然后，我将其添加到规则中：

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

• 确保您具有NPM安装-Save-DEV样式加载程序CSS-LOADER

I NPM RUN构建，并且可以使用！