책과 다른 내용이 있어서 여쭈어 봅니다.

[ghost]

9장 컴포넌트 스타일링 프로젝트 따라 하다 보면
webpack.config.dev.js 설정파일에서
책 내용은 아래처럼 나옴니다.
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[path][name]__[local]--[hash:base65:5]'
},
},

근데 막상 따라 해 보면
제 프로젝트 코드에는 아래처럼 나옵니다.
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions
},

cssOptions 값을 찾아서 직접 수정 할려구 하니
수정할 곳을 찾지 못하겠습니다.
어디서 수정을 해야 하는가요?
제 프로젝트의 설정파일의 getStyleLoaders 전체 코드는 아래와 같습니다.
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
{
loader: require.resolve('sass-loader'),
options: {
includePaths: [paths.styles]
}
}
];
if (preProcessor) {
loaders.push(require.resolve(preProcessor));
}
return loaders;
};

[velopert]

안녕하세요. 이에 대하여 두가지 솔루션이 있습니다.

1. 책에서 사용하는 CRA 버전을 사용하는 것 입니다.

프로젝트를 생성하실 때

$ npx create-react-app sample-project --scripts-version=1.1.5

이렇게 해서 프로젝트를 만드시면 책이랑 똑같이 진행 할 수 있습니다.

2. 책 내용 대신에 https://velog.io/@velopert/react-component-styling 여기를 참고합니다.

최신 CRA 에 맞춰서 작성한 튜토리얼입니다.

제가 추천드리는 방식은, 책의 예제를 따라하실땐 1번을 하시고 (뒤에서 사용하는 프로젝트들도 최신 버전에선 webpack 설정이 바뀌기에 이렇게 하는것을 추천드립니다) 그리고 2번을 통해서 요즘은 어떻게 하는지 알아보면 좋을 것 같습니다.

즐거운 하루되세요!