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

Plik robots.txt


User-agent: *
Disallow: /zdjecia/new/
Disallow: /zdjecia/box/
User-agent: Googlebot-Image
Disallow: /zdjecia/box/
User-agent: e-SocietyRobot
Disallow: /
User-agent: psbot/0.1
Disallow: /
User-agent: twiceler
Disallow: /
User-agent: TMCrawler
Disallow: /
User-agent: Gigabot
Disallow: /
Noindex: /*?q=
Sitemap: http://.../mapa.xml

Kody odpowiedzi HTTP

Błąd klienta (1xx):

100 - Kontynuuj.
101 - Zmiana protokołu.

Udane (2xx):

200 - OK.
201 - Utworzone.
202 - Przyjęte.
203 - Dane nieautorytatywne.
204 - Brak zawartości.
205 - Odświeżona zawartość.
206 - Część zawartości.

Przekierowanie (3xx):

300 - Wiele opcji do wyboru.
301 - Trwale przeniesione.
302 - Przeniesione tymczasowo.
303 - Patrz inny.
304 - Bez zmian.
305 - Użycie proxy.

Błąd klienta (4xx):

400 - Niewłaściwe żądanie.
401 - Brak autoryzacji.
402 - Wymagana jest opłata.
403 - Dostęp zabroniony.
404 - Nie znaleziony.
405 - Metoda nie dozwolona.
406 - Nie zaakceptowany.
407 - Wymagane uwierzytelnienie proxy.
408 - Upłynął limit żądania.
409 - Konflikt zasobów.
410 - Przeniesiony.
411 - Wymagana długość.
412 - Niespełniony warunek wstępny.
413 - Przekroczony rozmiar komunikatu żądania.
414 - Przekroczony rozmiar adresu URL.
415 - Nośnik nieobsługiwany.

Błąd serwera (5xx):

500 - Wewnętrzny błąd serwera.
501 - Funkcje niezaimplementowana.
502 - Niewłaściwa brama.
503 - Usługa niedostępna.
504 - Przekroczony limit czasu bramy.
505 - Nieobsługiwana wersja HTTP.