728x90 반응형 SMALL 개념/React43 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. SCSS) ..... utils.scss $red : #fa5252;$orange: #fd7e14;$yellow : #fcc419;$green : #40c057;$blue: #339af0;$indigo: #5c7cfa;$violet: #7950f2;@mixin square($size){ $calculated : 32px * $size; width : $calculated; height: $calculated;}1. **Color Variables**: The first section declares variables for a range of colors, assigning hex values to each. These variables (`$red`, `$orange`, `$yellow`, `$green`, `.. 2025. 4. 14. 이전 1 2 3 4 ··· 11 다음 728x90 반응형 LIST