为什么 webpack 的 CSS 加载器不起作用？答案

【问题标题】：Why CSS loader of webpack not working?为什么 webpack 的 CSS 加载器不起作用？
【发布时间】：2018-08-18 10:27:14
【问题描述】：

我正在制作 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 加载器之外，webpack 对于 javascript、typescript 等都可以正常工作。所以这实际上只是 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;

有什么想法吗？

【问题讨论】：

分享你的 webpack 配置文件。还有你的代码结构，因为我们需要知道结构来帮助你导航到样式文件。
我按照官方文档中的例子：github.com/webpack-contrib/css-loader
我也试过这个指南，它几乎与帖子中描述的相同错误：css-tricks.com/css-modules-part-2-getting-started
我认为你最好分享代码。
styles.css 的路径很可能是错误的。如果 styles.css 与您尝试从中导入的文件位于同一文件夹中，请尝试 import test from './styles.css';

标签： reactjs typescript webpack css-loader

【解决方案1】：

您确定需要命名导入吗？这应该可以工作：import './styles.css';。

【讨论】：

【解决方案2】：

问题与打字稿有关，与 webpack 或 css 加载器无关。所以我需要将 css 文件添加到 typescript 的模块中：

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

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

【讨论】：

【解决方案3】：

您应该为您的文件提供一个相对路径：

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

【讨论】：

TS2307：找不到模块“styles.css”。
这是您尝试导入'styles.css'的唯一地方吗？我希望看到找不到模块'./styles.css'