[React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부

2021/01/14 - [React] - [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부

[React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부

 

 

 

 

이전 글에서 webpack 을 이용하여 개발환경을 구성했다. 작성한 프로젝트에 css를 추가하고자 한다.

src 디렉토리가 위치한 동일 디렉토리에 public 디렉토리를 생성하고 css 디렉토리를 생성한 후

style.css 파일을 작성한다.

#App_title {
    color:forestgreen;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

 

css 파일을 가져와서 컴파일 해주기 위해 webpacck 에 아래와 같이 MiniCssExtractPlugin 을 추가한다.

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname + "/build")
  },
  devServer: {
    contentBase: path.resolve("./build"),
    index: "index.html",
    port: 3000
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: "/node_modules",
        use: ['babel-loader'],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({})
  ]
};

 

App 컴포넌트에도 상대경로를 이용하여 css 를 추가해준다.

import React from 'react';

import '../../public/css/style.css';

const App = () => {
  return (
    <h3 id="App_title">Hello, React</h3>
  );
};

export default App;

 

이렇게 하면 css적용에는 문제가 없으나, ../../ 를 사용하여 모양새가 별로 좋지 않아서 절대경로로 변경하고 싶다.

alias 를 부여하여 깔끔하게 정리해보자.

webpack 에서 간단하게 alias 적용할 수 있다.

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname + "/build")
  },
  devServer: {
    contentBase: path.resolve("./build"),
    index: "index.html",
    port: 3000
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: "/node_modules",
        use: ['babel-loader'],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({})
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.json', 'css'],
    alias: {
      '@components': path.resolve(__dirname + "/src/components"),
      '@css': path.resolve(__dirname + "/public/css")
    }
  }
};

 

resolve 에 alias 를 주어 webpack 이 위치한 디렉토리를 기준으로 별칭을 줄 디렉토리를 설정한다.

그리고 App 컴포넌트의 import 에 별칭을 이용하여 불러온다.

import React from 'react';

import '@css/style.css';

const App = () => {
  return (
    <h3 id="App_title">Hello, React</h3>
  );
};

export default App;

 

변경하는 김에 index.js 파일에서 App.js 컴포넌트를 import 하는 부분도 수정했다.

import React from "react";
import ReactDOM from "react-dom";
import App from "@components/App";

ReactDOM.render(<App />, document.getElementById("app"));

 

이렇게 하면 css가 바로 적용될 줄 알았으나 아래와 같은 오류가 발생하였다.

webpack 에만 설정해주면 안되는 것 같다.

최상위 디렉토리에 jsconfig.json 파일을 생성하여 아래와 같이 작성해주자.

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
          "@components/*": ["src/components/*"],
          "@css/*": ["public/css/*"]
        }
    },
    "exclude": ["node_modules", "build", ".babelrc"]
}
  

 

이제 이상없이 css가 적용 되었다.