728x90 SMALL 전체 글523 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. React) basic_Component import { Component } from "react";class App extends Component{ render(){ const name = 'react'; return {name} }}export default App;1. **Import React Component**: The snippet begins by importing `Component` from the React library. This is necessary to extend the `Component` class when creating a class component in React. 2. **Class Component Definition**: The `App` .. 2025. 4. 13. 이전 1 ··· 18 19 20 21 22 23 24 ··· 131 다음 728x90 LIST