Question

我正在制作css-loader文档中描述的玩具示例： https://github.com/webpack-contrib/css-loader

我还尝试了基本指南，该指南也提出了相同的建议：https://css-tricks.com/css-modules-part-2-getting-started/

但是，VS Code高亮显示和通过命令行捆绑在一起时，都抱怨CSS文件的模块不可用。喜欢它并不能真正识别它。我检查过我确实确实安装了css-loader，webpack等。除了css loader，webpack对于javascript，打字稿等都可以正常工作。因此，这实际上只是CSS的问题。任何想法为什么会失败？

我得到的错误是：

  TS2307: Cannot find module 'styles.css'.

我的文件：

import test from 'styles.css';

我也尝试了不带文件扩展名，不带花括号等的情况。但确实遵循了css-loader文档中的玩具示例。

我的webpack.config文件：

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

const config = {
  entry: "./src/index.tsx",
  resolve: {
    extensions: ['.tsx', '.js', '.css']
  },
  output: {
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'title Cool!',
    }),
  ],
  module: {
    rules: [
      {
        test: /.tsx$/, 
        loader: "ts-loader" ,
      },
      {
        test: /.css$/,
        use: [ 'style-loader', 'css-loader' ],
      }
    ]
  }
}

module.exports = config;

有什么想法吗？

Answer 1

确定要命名导入吗？这应该起作用：import './styles.css';。

Answer 2

您应提供文件的相对路径：

import test from './path/to/styles.css';

Answer 3

问题与打字稿有关，与webpack或CSS加载程序无关。所以我需要将CSS文件添加到用于打字稿的模块中：

declare module '*.css' {
    const content: any;
    export default content;
}

成功了。我不知道为什么在我看到的几十个教程和指南中都没有提到这一点。

为什么webpack的CSS加载程序不起作用？

3 个答案: