H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】为什么react+typescript加载scss或者css会报错,找不到模块

图片描述
如图,实际上是存在的,但是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"
  ]
}

回答:

能看下你的tsconfig.json吗?

回答:

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

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

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

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

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

TypeScript–模块

回答:

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

回答:

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

本文地址:H5W3 » 【前端问题精选】为什么react+typescript加载scss或者css会报错,找不到模块

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址