FrontEnd

Create React App + TS + VS Code 配置 SASS

undefined

Posted by NeptLiang on February 8, 2023

配置

1. 安装 sass

参考《Create React App 文档》添加 Sass 样式表章节（create-react-app.dev/docs/adding-a-sass-stylesheet）可知，要使用 Sass，首先安装 sass：

$ npm install sass
# or
$ yarn add sass

2. d.ts 文件

  • 装完 sass 后 VS Code 里的 SCSS 模块导入语句会报错：

    找不到模块“./index.module.scss”或其相应的类型声明。 ts(2307)

    故还需添加 .d.ts 文件

参考夜葬@segmentfault 在《搭建 React + Typescript 环境，使用cssModule的正确姿势是怎样的？》（segmentfault.com/q/1010000017979602）中的回答与Null@segmentfault 在《为什么react+typescript加载scss或者css会报错，找不到模块》（segmentfault.com/q/1010000018446035）中的回答可知，可以在项目根目录或者 src 目录下建立一个 typings/module.d.ts [2]，内容如下： [3]

declare module '*.scss';

3. tsconfig.json

  • 令人迷惑的是，加了 .d.ts 之后，如果把 VS Code 窗口中的 module.d.ts 文件关掉，VS Code 又会报上节所述错误，故还需添加 tsconfig.json

参考夜葬@segmentfault 在《搭建 React + Typescript 环境，使用cssModule的正确姿势是怎样的？》（segmentfault.com/q/1010000017979602）中的回答可知，可以在项目根目录建立一个 tsconfig.json，把上节建立的 typings 目录导入，参考内容如下： [2]

```JSON with Comments { “compilerOptions”: { “typeRoots”: [”./src/typings”], //其实不加这行也可，只要有 tsconfig.json 且其中包含以下两行就行

    // 如果只创建 tsconfig.json 但没写入下面两行，也会报其他错误
    "jsx": "react",
    "esModuleInterop": true
} } ```

附：React 中使用 SASS 实践 [4]

my-component/index.module.scss:

// 根节点使用 CSSModules 形式的类名（驼峰命名）
.parentNode {
    //一般不这么定义，而是按照下方 :global 包裹的方式定义
    .classA {}      

    // 使用 :global 包裹其他子节点的类名，在 JSX 中使用时就可以用 className="title" 形式的类名
    // 如果不加 :global，就必须写成 className={styles.title} 形式
    :global {
        // 其他所有的子节点，都使用普通的 CSS 类名
        .class-b {}
        .class-c {}
    }
}

my-component/index.tsx:

import styles from './index.module.scss';

const myComponent = () => (
    // 不被 :global 包裹的类名，须写成 styles.title 形式
    <div className={styles.parentNode} >
        <div className={styles.classA} />
        {/* 使用 :global 包裹的类名，可以用 className="title" 形式 */}
        <div className="class-b" />
        <div className="class-c" />
    </div>
);

参考

//End of Article

公众号二维码

CATALOG