create-react-app i scss

Aby umożliwić korzystanie z scss w create-react-app robię podstawowe rzeczy. Najpierw zerknij w package.json na razie jest minimalistycznie teraz z konsoli uruchamiam npm run eject

Potrzebnych nam są jeszcze trzy biblioteki node-sass, sass-loader oraz resolve-url-loader.
Ja używam yarna czyli uruchamiam

yarn add -D sass-loader node-sass resolve-url-loader

lub dla tych co używają NPM

npm i -D sass-loader node-sass resolve-url-loader

Najpierw zajmiemy się wersją deweloperską znajduje się w folderze config -> webpack.config.dev.js
Kod wstawiam między
test: /\.(js|jsx|mjs)$/ a między test: /\.css$/

{
  test: /\.scss$/,
    include: [paths.appSrc, paths.appNodeModules],
      use: [
        {
          loader: require.resolve('style-loader'),
          options: {
            sourceMap: true
          }
        },
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[local]'
          },
        },
        require.resolve('resolve-url-loader'),
        {
          loader: require.resolve('sass-loader'),
          options: {
            sourceMap: true
          }
        }
      ]
},

a wersji produkcyjnej która również znajduje się w folderze config -> webpack.config.prod.js
Również w tym samym miejscu umieszczamy poniższy kod miedzy test: /\.(js|jsx|mjs)$/ a test: /\.css$/

{
  test: /\.scss$/,
    include: [paths.appSrc, paths.appNodeModules],
      use: [
        {
          loader: require.resolve('style-loader'),
          options: {
            sourceMap: true
          }
        },
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[sha1:hash:hex:4]',
          },
        },
        require.resolve('resolve-url-loader'),
        {
          loader: require.resolve('sass-loader'),
          options: {
            sourceMap: true
          }
        }
      ]
},

Różnica między dev jest localIdentName: '[local]' a prod localIdentName: '[sha1:hash:hex:4]' w dev pokazuję normalne klasy 'home' czy 'container' a w prod te klasy są zmienione np. na coś takiego 'ea27' 😉 Oczywiście

I tyle teraz uruchamiamy yarn start lub npm start