为什么react+typescript加载scss或者css会报错，找不到模块

Question

如图，实际上是存在的，但是ts就会报找不到模块

//index.tsx
import * as React from "react";
import styled from "./styled.scss";
class Header extends React.Component {
  constructor(props: any) {
    super(props);
  }
  render() {
    return (
      <div className={styled.header}>
        <i className="fa fa-bars" aria-hidden="true" />
        <span />
        <i className="fa fa-search" aria-hidden="true" />
      </div>
    );
  }
}
export default Header;

但是把import styled from "./styled.scss"; 改成import "./styled.scss";就没问题
我重新建立了一个react项目 不加载ts同样的方法是不会报错
我在webpack开启了模块化的，这是webpack部分配置 代码太长就不放上来了

 //webpack
 const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign({},
          shouldUseRelativeAssetPaths ? {
            publicPath: '../../'
          } : undefined
        ),
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      });
    }
    return loaders;
  };

            {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction ?
                    shouldUseSourceMap : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
            {
              test: sassModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction ?
                    shouldUseSourceMap : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },

ts配置

//tsconfig.json 
{
  "compilerOptions": {
    "baseUrl": ".",
    "allowSyntheticDefaultImports": true,
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es2015", "dom"],
    "sourceMap": true,
    // "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "util",
    "module",
    "src/setupTests.ts"
  ]
}

Answer 1

能看下你的tsconfig.json吗？

Answer 2

style.scss 是样式文件，不是一个模块。这个文件里根本没有说明导出什么内容，既然没有导出，你怎么导入呢？

所以 import styled from "./styled.scss" 会报错,这是从styled.scss这个文件里导入一个叫styled的导出内容，而文件里没有，所以肯定报错。

而 import "./styled.scss" 不会报错，这只是导入一个文件而已。

那个文件里需要定义了导出(export)的变量/方法 等等，import xxx from xxx才会正常工作。

建议你想先看一下TypeScript的文档。

TypeScript--模块

Answer 3

由于ts导入模块需要定义文件，所以使用css module，需要导入css-modules-typescript-loade这个插件，放在css-loader之前加载即可。之前还有个typings-for-css-modules-loader的插件貌似只能支持到css-loader v1.0版本不好使了。

Answer 4

这样：
const styles = require('./index.less')

Answer 5

新建typings.d.ts文件添加内容，然后放入src下。

declare module 'slash2';
declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';
declare module 'omit.js';
declare module 'numeral';
declare module '@antv/data-set';
declare module 'mockjs';
declare module 'react-fittext';
declare module 'bizcharts-plugin-slider';

// google analytics interface
type GAFieldsObject = {
  eventCategory: string;
  eventAction: string;
  eventLabel?: string;
  eventValue?: number;
  nonInteraction?: boolean;
};

interface Window {
  ga: (
    command: 'send',
    hitType: 'event' | 'pageview',
    fieldsObject: GAFieldsObject | string,
  ) => void;
  reloadAuthorized: () => void;
}

declare let ga: () => void;

declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;