Question

我正在尝试在组件.js文件中加载css文件，但这样做时出现此错误：

./stories/styles.css中的

错误模块解析失败：意外令牌（1：0）您可能需要适当的加载程序来处理此文件类型。

我在我的webpack.config.js文件中添加了以下规则，以照顾装载程序，但仍然出现错误。

rules: [
      {
        test: /\.s?css$/,
        use: ['style-loader', 'raw-loader', 'sass-loader', 'css-loader'],
        include: [
          path.resolve(__dirname, '../css/'),
        ],
      },

我的styles.css文件如下：

.row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.row.dark {
    background: #303030;
}

.col {
    width: calc(100% - 400px);
    padding: 15px;
}

.row > .col:first-child {
    border-right: 1px solid #ccc;
    max-width: 400px;
}

我需要添加任何其他加载程序吗？我什至尝试使用import而不是require来获取styles.css文件，但这没什么区别。

Answer 1

Webpack加载程序从右到左处理，您需要将配置更改为：

interface IRequest<TResponse> {
  _response?: TResponse
}

interface MyRequest extends IRequest<number> {
    id: string;
}

function execute<TResponse>(request: IRequest<TResponse>): Promise<TResponse>{
    return Promise.reject("not implemented");
}

// const response1: Promise<number>
const response1 = execute(<MyRequest>{
    id: "123"
});

// const response2: Promise<number>
const response2 = execute(<IRequest<number>>{
    id: "123"
});

我也不确定rules: [ { test: /\.scss$/, use: ['style-loader', 'raw-loader', 'css-loader', 'sass-loader'], include: [ path.resolve(__dirname, '../css/'), ], },在这里有什么用，因为它用于将文件作为字符串加载-您可能不需要它

CSS加载程序的模块解析失败错误

1 个答案: