본문 바로가기
728x90
반응형
SMALL

개념326

React) React Component Styling with CSS Modules Jsimport styles from './CSSModule.module.scss';const CSSModule = () => { return ( hello, i am CSS Module! );};//App.js// import {Component} from 'react';// import CSSModule from './frames/Component style/classname + Sass/CSSmodule';//// class App extends Component {// render(){// return(// // // .. 2025. 4. 18.
React) Implementing CSS Modules in a React Component for Scoped Styling Jsimport styles from './CSSModule.module.css';const CSSModule = () => { return ( hello, i am CSS Module! );};export default CSSModule; 1. **CSS Modules Import**: The code begins by importing styles from a CSS file (`CSSModule.module.css`). This import syntax leverages CSS Modules, which automatically scopes class names locally to the component, prev.. 2025. 4. 17.
React) Webpack Configuration for Compiling Sass with CSS Modules // webpack.config.js의 일부// sassRegex{ test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, // css-loader가 처리하기 전에 2개의 로더(sass-loader와 postcss-loader)를 거칩니다. sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }).concat({ loader: require.resolve("sass-loader"), options: { .. 2025. 4. 16.
React) Creating a Responsive Color Box Layout with Sass in React JSimport './SassComponent.scss';const SassComponent = () => { return ( );};//SassComponent.scss//sass : 중괄호와 세미콜론 사용하지 않음//scss : 기존 css를 작성하는 방식과 비교하여 문법이 크게 다르지 않음// $red: #fa5252;// $orange: #fd7e14;// $yellow : #fcc419;// $green : #40c057;// $blue: #339af0;// $i.. 2025. 4. 15.
728x90
반응형
LIST