sass loader 설정 / typescript환경 css module설정

sass는 css에서 조건분기 함수 등을 사용할 수 있도록 문법을 제공한다.

sass확장자와 scss확장자 2가지가 있다. 각 확장자에 따라 작성하는 문법이 다르다.

scss모듈을 사용할 수 있도록 webpack에 설정해볼것이다.

이를 위해 sass-loader, node-sass를 설치해야 된다.

sass-loder node-sass

yarn add sass-loader node-sass -D

 

loader-chaning

sass파일을 css파일로 컴파일

컴파일 된 css파일이 css-loader를 통해 build

sass-loader가 먼저 작동

loader-chaning은 use[index1, index2, ..., indexN]배열의 index가 큰 loader부터 순서대로 진행된다.

 

css 모듈 설정

css파일을 사용할 경우 global css, local css를 사용할 수 있다.

application에서 global로 사용할 style과 component내에서만 사용할 local style이다.

이러한 2가지 사용을 구분하기 위해 이름을 인식하여 loader가 다르게 적용되도록 webpack에 설정할 것이다.

filename.module.css를 이용하면 local에서만 사용하도록 하여 다른 컴포넌트에서 같은 className을 사용하더라도 충돌하지 않도록 설정한다.

 

기존에 설정한 css에 scss가 적용되도록 수정한다.

module.exports = {
    ...,
    module: {
        rules: [
            {
                test: /\.s?css$/i,
                oneOf:[
                    {
                        test: /\.module\.s?css$/,
                        use: [
                            {
                                loader: MiniCssExtractPlugin.loader
                            },
                            {
                                loader: 'css-loader',
                                options:{
                                    modules: true
                                }
                            },
                            {
                                loader: 'sass-loader'
                            }
                        ]
                    },
                    {
                        use: [
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            'sass-loader'
                        ]
                    }
                ]
            },
            ...
    },
    ...
}

oneOf는 여러가지 rule 중 하나의 rule만 작동 되도록 설정하는 것이다.

먼저 파일이름에 .module.s?css 이 포함될 경우에 대한 처리 내용이다.

 

1. css module이 적용 된 경우

위에서 작성했듯 use배열에는 index가 큰 순서대로 작동하는데 먼저 sass-loader를 통해 application내에 sass파일이 있다면 먼저 sass파일을 css파일로 컴파일 한다.

그 다음 css-loader를 통해 css파일을 localizing하는(options의 modules가 true이면 localizing이 가능하다) css-loader가 작동된다.

그 다음 MiniCssExtractPlugin을 통해 css내용이 외부 파일로 나오도록 한다.

2. 첫번째 rule을 따르지 않는 경우 (css module이 적용 되지 않은 경우)

sass-loader를 통해 컴파일, css-loader, MiniCssExtractPlugin 차례대로 진행된다.

 

typescript를 사용할 경우

typescript에서 css module설정을 해보았을때 import가 되지 않는 오류가 있었다.

import styles from 'file.module.scss';

typescript는 typescript컴파일러가 module에 대한 코드를 이해시켜야 하는 몇가지 설정이 더 필요했다.

 

여러차례 삽질을 통해 문제를 고쳤고, 내가 취한 조치이다.

1. custom.d.ts를 생성하고 여기에 module에 대한 설정을 하는 코드를 작성한다.

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { [key: string]: string };
  export default classes;
}

declare module '*.module.less' {
  const classes: { [key: string]: string };
  export default classes;
}

declare module '*.module.styl' {
  const classes: { [key: string]: string };
  export default classes;
}

2. "include"옵션에 custom.d.ts를 포함시킨다.

"include": ["./src/**/*", "@type", "custom.d.ts"],

3.  typescript-plugin-css-modules 플러그인을 설치한다.

yarn add -D typescript-plugin-css-modules

4. tsconfig.json의 compilerOptions에 설치한 플러그인을 사용하도록 코드를 입력한다.

"plugins": [{ "name": "typescript-plugin-css-modules" }]

2,3,4번 설정 결과 tsconfig.json는 이런 형식으로 되어 있어야 한다.

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  ...,
  "include": ["./src/**/*", "@type", "custom.d.ts"],
}

3번에서 typescript-plugin-css-modules를 설치하지 않고 tsconfig.json에

"typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]

를 추가시켜주어도 된다.(compilerOptions 밖에 작성해야됨)

 

typescript환경에서의 css module 설정에 대한 내용은 아래 주소에서 얻을 수 있었다.

https://github.com/mrmckeb/typescript-plugin-css-modules#visual-studio-code

GitHub - mrmckeb/typescript-plugin-css-modules: A TypeScript language service plugin providing support for CSS Modules.