Category Archives: JavaScript

JavaS cript

Jak przyspieszyć ładowanie CSS

Podam dwa sposoby na przyspieszenie renderowania się stron.

I. Sposób

Pierwszy sposób dotyczy najnowszych przeglądarek ale w przyszłości będzie działać wszędzie. Tego sposobu używa aliexpress.com 🙂 Chyba największy sklep na świecie, więc czy Chińczycy mogą się mylić 😉
Poniższy przykład wyrenderuje stronę dopiero wtedy kiedy przetworzy całą zawartość app.css

<head>
  <link rel="stylesheet" href="app.css" />
</head>
<body>
  <header class="page-header">...</header>

  <section class="sidebar">...</section>

  <main class="content">...</main>

  <footer class="page-footer">...</footer>
</body>

Możemy lekko poprawić wydajność powyższego rozwiązania a przynajmniej tak nam się może wydawać.

<head>
  <link rel="stylesheet" href="common.css" />
  <link rel="stylesheet" href="page-header.css" />
  <link rel="stylesheet" href="sidebar.css" />
  <link rel="stylesheet" href="content.css" />
  <link rel="stylesheet" href="page-footer.css" />
</head>
<body>
  <header class="page-header">...</header>

  <section class="sidebar">...</section>

  <main class="content">...</main>

  <footer class="page-footer">...</footer>
</body>

Niestety ale powyższe rozwiązanie pod http/2 połączy wszystko i będzie tak samo działo jak rozwiązanie pierwsze czyli blokowało renderowanie strony.

Inne podejście które używa aliexpress.com to umieszczanie styli w samym body w poszczególnych sekcjach. Przeglądarka renderuje poszczególne sekcje niezależnie od siebie. Coś na styl web components.

<head>
  <link rel="stylesheet" href="common.css" />
</head>
<body>
  <link rel="stylesheet" href="page-header.css" />
  <header class="page-header">...</header>

  <link rel="stylesheet" href="sidebar.css" />
  <section class="sidebar">...</section>

  <link rel="stylesheet" href="content.css" />
  <main class="content">...</main>

  <link rel="stylesheet" href="page-footer.css" />
  <footer class="page-footer">...</footer>
</body>

II. Sposób

Praktycznie wszystkie strony posiadają skrypt google analytics który umieszczamy w head. Zazwyczaj przed zamknięciem head i tutaj jest błąd.
Okazuje się ze takie rozwiązanie jak poniżej jest błędne bo tak jak w przykładzie pierwszym renderuje się najpierw cały css, a później tworzony jest script.

<head>
  <link rel="stylesheet" href="style.css" />
  <script>
    var script = document.createElement('script');
    script.src = 'speed.js';
    document.getElementsByTagName('head')[0].appendChild(script);
  </script>
</head>

Wystarczy zmiana kolejności wykonywania się elementów.

<head>
  <script>
    var script = document.createElement('script');
    script.src = 'speed.js';
    document.getElementsByTagName('head')[0].appendChild(script);
  </script>
  <link rel="stylesheet" href="style.css" />
</head>

Oczywiście najlepszym rozwiązaniem jest dodanie async do skryptów i wtedy nasz problem znika 😉

Standard

Komentarze

Zostaw komentarz

Data publikacji

11/01/2019

Kategoria

CSS, HTML, JavaScript

Napisał

Kilka przydatnych Chrome Dev Tools trików

Kilka użytecznych przykładów użycia „console”.

Najpierw stwórzmy sobie plik html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <p>DZISIAJ W ...</p>
    <script src="console.js"></script>
  </body>
</html>

Później tworzę plik console.js a w nim będą przykłady użycia różnych zapisów „console”

const persons = [{ name: "Adam", age: 18 }, { name: "Greg", age: 20 }];

// podstawowe użycie
console.log("Podstawowy");

// interpolacja danych do stringa na dwa sposoby
console.log("Hellow World %s", "💩");
// lub template
const poop = "💩";
console.log(`Hellow World ${poop}`);

// style
console.log("%c Hellow World %s", "font-size: 50px; color: red");

// Ostrzeżenie wyświetlane na żółto
console.warn("Warn");

// Bład wyświetlany na czerwono
console.error("Error");

// informacja
console.info("Info");

// test
const p = document.querySelector("p");
console.assert(p.classList.contains("ouch"), "Brak klasy");

// czyszczenie
// console.clear();

// Podglad elementów DOM
console.log(p);
console.dir(p);

// Grupowanie elementów
persons.forEach(person =&gt; {
// console.group(`${person.name}`);
console.groupCollapsed(`${person.name}`);
console.log(`To jest ${person.name}`);
console.log(`${person.name} ma ${person.age} lat`);
console.groupEnd(`${person.name}`);
});

// Zliczanie występowania tych samych elementów
console.count("Test");
console.count("Test");
console.count("Greg");
console.count("Test");
console.count("Greg");
console.count("Test");

// np. czas pobierania danych
console.time("pobranie danych");
fetch("https://api.github.com/users/tomik23")
.then(data =&gt; data.json())
.then(data =&gt; {
console.timeEnd("pobranie danych");
console.log(data);
});

// Prezentowanie tabelaryczne
console.table(persons);

I na końcu coś co nie jest związane z „console” ale również się przydaje mianowicie dodanie debugger; to js. Kiedy następuje wywołanie instrukcji debugger, uruchomienie programu zatrzymywane jest na wyrażeniu debugger. Działa to tak jak ustawienie breakpointu w kodzie źródłowym skryptu.

function showAllStirngs() {
debugger;
}

Poniżej printscreen pokazujący Chrome Dev Tools

Standard

Komentarze

Zostaw komentarz

Data publikacji

02/01/2019

Kategoria

JavaScript

Napisał

Docker + wordpress + phpmyadmin wersja Windows

Nie opiszę tutaj wszystkiego związanego z dockerem bo jestem świerzynka w tym temacie oraz jest tego tyle że po prostu nie da się tego opisać bez przepisywania dokumentacji 😉
Będzie to tylko mały wycinek tego co jest mi potrzebne do frontentu z przykładem użycia WordPress, MySQL oraz phpMyAdmin na Windowsie.

Do czego można by użyć Dockera?

Powiedźmy że chcemy stworzyć aplikację składającą się właśnie z WordPress + MySQL + phpMyAdmin aby przygotować nowy theme czy plugin.
Wszystko to musimy zainstalować osobno na komputerze do tego PHP + apache2 lub użyć Xampp’a, ale co jeśli musielibyśmy użyć kilku wersji PHP 5.5 czy 5.6 i do tego MySQL również w kilku wersjach.

Normalnie czekało by nas bardzo długie konfigurowanie każdej instancji, odinstalowanie elementów i instalacja nowych oraz ich konfiguracja czyli jednym słowem koszmar.

W takich przypadkach pomocny jest właśnie Docker. Wystarczy wybrać kontener z wersją aplikacji i już. Można nawet uruchomić wiele kontenerów równolegle, dzięki czemu możemy testować aplikację w kilku rożnych wersjach w tym samym czasie!
Najważniejsze przynajmniej dla mnie jest to że nie zaśmiecamy sobie środowiska zbędnymi instalacjami, a jak wiemy w tym względzie Windows jest dość ułomnym środowiskiem i można go łatwo „zepsuć”.

Teraz trochę definicji.

Docker jest narzędziem , które pozwala umieścić program oraz jego zależności w przenośnym wirtualnym kontenerze. Umożliwia utworzenie kontenerów zawierających pojedyncze aplikacje ale także łączyć je w większe środowiska.

Ok zaczynamy zabawę.

Najpierw należy zainstalować Dockera na komputerze cały proces jest opisany na zerknij tutaj
W dalszej części będziemy korzystać z narzędzia Docker Compose ono jest dla wersji MAC jak i Windows jest zaszyte w instalacji Docker zaś linuxowcy muszą je osobno doinstalować.

Otwieramy konsole i wpisujemy

docker run hello-world

Jeżeli wszystko przebiegło poprawnie powinniśmy zobaczyć w konsoli to co poniżej.

Sprawdźmy jakie mamy obrazy, powinien być jeden hello-world, aby to sprawdzić piszemy

docker images

i dostajemy

Może co poważniejszego zainstalujmy na przykład nginx

docker container run -it -p 80:80 nginx

Kilka chwil i mamy uruchomioną instancję nginx, otwieramy przeglądarkę i http://localhost/index.html i mamy powitalną stronę

Teraz wyobraźcie sobie ile czasu by to zajęło w konwencjonalnym podejściu instalacja tego pod Windosem 🙂

Kilka przydatnych komend poniżej.

  • docker – wyświetla wszystkie podstawowe komendy
  • docker help – podstawowa komenda dzięki której można sprawdzić składnie oraz wyszukać inne komendy
  • docker pull [nazwaObrazu] – pobranie obrazu
  • docker search [imageName:imageTag] – komenda wyszukuje obrazy o podanej nazwie i tagu
  • docker run [args] [imageName:imageTag/imageId] – stworzenie oraz uruchomienie kontenera z obrazu
  • -it – tryb interaktywny (możemy np: korzystać z bash’a)
  • -p – protokół mapuje wystawiony port naszego kontenera na port naszego localhost
  • -d – tryb deamon, działa na zasadzie usługi
  • -expose – pozwala nam wystawić post naszego kontenera na zewnątrz
  • docker ps – komenda pokazuje nam działające kontenery jeżeli chcemy zobaczyć również te niedziałające docker ps -a
  • docker kill/stop [containerName/containerId] – komenda służy do wyłączenia działającego kontenera. Zazwyczaj korzysta się z containerId z 3 pierwszych znaków
  • docker docker rename [containerOldName] [containerNewName] – komenda służy do zmiany nazwy kontenera
  • docker rm [containerName/containerId] – usunięcie kontenera z naszego komputera o zadanej nazwie lub id
  • docker rmi [imageName:imageTag/imageId] – usuniecie z naszego komputera obrazu o podanej nazwie i tagu lub id

To tylko ułamek wszystkich flag więcej można znaleźć tutaj.

Przejdźmy do konkretów.

A mianowicie chce uruchomić tak jak na wstępie pisałem WordPress + MySQL + phpMyaAmin i swój własny theme i tutaj przyda nam się Docker Compose.
Najpierw usuńmy pozostałości po naszych poprzednich próbach. Zobaczmy co jest zainstalowane najpierw

docker images -a

później

docker rm containerId

– czyli pierwsze 3 znaki kontenera i enter.

Zaczynamy od stworzenia folderu

mkdir docker-setup

następnie

cd docker-setup

i uruchamiam visual studio code przez komendę code .

Do vsc instaluje plugin Docker poniżej


plugin pokazuję kontenery images oraz Docker Hub wystarczy kliknąć na wielorybka, trochę upraszcza nam pracę mniej pisania w konsoli 😉

Na początku tworzę w docker-setup .dockerignore praktycznie coś na styl gita

Następnie tworzę plik docker-compose.yml w nim będzie działać się cała magia 🙂

  • version – oznacza wersję Docker Compose
  • services – sekcja, w której definiujemy serwisy
  • mysql:5.7 – nazwa własna usługi
  • image – wskazujemy z jakiego obrazu ma być zbudowany kontener
  • build – wskazujemy ścieżkę do pliku Dockerfile naszego serwisu – w projekcie nie używamy
  • ports – definiujemy porty, które będą mapowane z konteneru
  • links – zależność pomiędzy kontenerami, db oraz WordPress
  • environment – zmienna środowiskowa dla danego kontenera

Aby uruchomić Docker Compose w naszym terminalu używamy komendy

docerk-compose up

w miejscu w którym mamy docker-compose.yml

Za pierwszym razem wszystkie zależności które są w yml są zaciągane – nasza baza danych jak i WordPress.
Poniżej screen z vsc oraz z chrome w którym mamy WordPress w wersji do zainstalowania 🙂

Dodajmy do tego całego naszego środowiska również phpMyAdmin

phpmyadmin:
 depends_on:
  - db
 image: phpmyadmin/phpmyadmin
 ports:
  - 8080:80
 environment:
  MYSQL_ROOT_PASSOWRD: test

Musimy najpierw zastopować wszystkie kontenery czy to przez „ctrl+c” lub z innej konsoli „docker-compose down” albo z vsc prawy przycisk na poszczególny kontener i Remove Container jak kto woli. Ja używam docker-compose down jest najpewniejszym sposobem zamknięcia uruchomionych kontenerów.

Po dodaniu phpMyAdmin uruchamiamy ponownie „docker-compose up”

Wszystko działa szybciej bo pobierany jest tylko obraz phpMyAdmin, aby sprawdzić czy działa wchodzimy na to co ostawiliśmy mianowicie http://localhost:8080
Podajemy „Użytkownika root Hasło test” tak jak podaliśmy w docker-compose.yml
I naszym oczom ukazuje się phpMyAdmin z utworzoną baza wp

Wracamy do okna http://localhost/wp-admin/install.php tam instalujemy jak zawsze i wypełniamy danymi ale ZARAZ ZARAZ!!! jeśli wyłączymy wszystkie kontenery to co dodaliśmy do WordPress a mianowicie strony, artykuły wszystko to nam zniknie!!! Nie no tak to nie możne być!

Dodajemy własne artykuły wszystko co jest nam potrzebne w WordPressa i za pomocą phpMyAdmin eksportujemy bazę do pliku db.sql (nazwa oczywiście może być inna) nie musimy tego robić możemy pobrać jakąś inną bazę danych z innego WordPress jeżeli takową posiadamy i wystarczy to przygotowania naszego theme.
Dump bazy umieszczam w folderze „data/db.sql” w naszym projekcie oraz dodaje odpowiedni wpis w docker-compose.yml

db:
 image: mysql:5.7
 volumes:
  - ./data:/docker-entrypoint-initdb.d
 restart: always
 ...

volumes pobiera nam db.sql za każdym razem gdy uruchamiamy „docker-compose up” i mamy z głowy uzupełnianie danych w bazie, możemy wejść na http://localhost i zobaczyć naszego WordPress

Dodajemy własne theme.

Teraz druga cześć chcemy dodać własny theme, ponownie stopujemy docker-compose down w głównym folderze naszego projektu dodaje folder wp-content/themes/newTemplate z plikami odpowiedzialnymi za theme.
Teraz aby to zostało zaciągnięte i widoczne w WordPressie należy dodać values tym razem do wpisu wordpress.

Ponownie docker-compose up, teraz możemy pracować na theme, aby zobaczyć zmiany które zrobiliśmy w theme wystarczy odświeżyć WordPress F5 w przeglądarce. Nie trzeba stopować kontenerów.

Źródła znajdują się pod tym adresem

Standard

Komentarze

Zostaw komentarz

Data publikacji

26/08/2018

Kategoria

CSS, HTML, JavaScript, MySQL, PHP, SQL, Wordpress

Napisał

Gulp workflow: minimalizacja zdjęć i konwersja na webp

Kiedyś w zamierzchłych czasach używałem perla + lib ImageMagick do konwersji zdjęć, ale mamy XXI wiek i Node 😉
Od jakiegoś czasu zmienił się mój workflow dotyczący obróbki zdjęć na potrzeby stron internetowych.
Do tej pory używałem gulp-image, gulp-imagemin i wiele innych, ale zawsze coś było nie tak, zawsze czegoś brakowało.
Ostatnio używam takiego zapisu jak poniżej

<picture>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.webp" type="image/webp">
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.jpg" type="image/jpeg">
    <img class="img-responsive" src="./images/thumbnail/IMG_5600.jpg" alt="">
</picture>

i potrzebowałem również webp, no i co następna biblioteka gulp-webp jest potrzebna 🙁
Mały research i okazało się że jest biblioteka sharp, która bardzo dobrze zastępuje ImageMagick więcej na tej stronie. Biblioteka ta jest w stanie zastąpić wszystko co do tej poru używałem.

Obecnie korzystam z pluginu gulp-responsive który pod spodem używa tejże biblioteki sharp.
Zmiana rozmiaru obrazu za pomocą tej biblioteki jest zazwyczaj 4x-5x szybsza niż w przypadku najszybszych ustawień ImageMagick i GraphicsMagick, a więc czemu jej nie używać. Oczywiście ta bibliotek nie tylko do zmniejsza grafiki ale również przycina, zmieniania formatu, zapisu do grayscale czyli szarości i wiele innych użytecznych rzeczy potrafi 🙂

Dobra zaczynamy cały proces.
Oczywiście musimy mieć zainstalowane node w naszym środowisku ale to nie temat na ten artykuł.

Na początek tworzymy package.json

npm init -y

Instalujemy wszystkie potrzebne biblioteki

npm i -D gulp gulp-responsive gulp-load-plugins

Tworzymy folder ze zdjęciami „sources” następnie gulpfile.js

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('images', function () {
    return gulp.src(['sources/**/*.{jpg,png}'])
        .pipe($.responsive({
            '*.jpg': [{
                width: 1200,
                height: 800
            }, {
                // Konwertujemy jpg do formatu webp
                width: 1200,
                height: 800,
                rename: {
                    extname: '.webp'
                }
            }]
        }, {
                // globalne ustawienia
                max: true,
                quality: 65,
                progressive: true,
                withMetadata: false,
                errorOnEnlargement: true
            }))
        .pipe(gulp.dest('dist'));
});

Oczywiście aby ten wynalazek uruchomić należy tak jak wszystkie taski w gulpie czyli:

gulp images

Ustawienia globalne:
– max parametr potrzebny gdy zdjęcie jest zrobione w pionie – trzyma proporcje
– quality wiadomo jakość dla grafik jpg jak i webp
– progressive, jpg ładuje się od góry do dołu linia po linii, progresywny ładuje się całościowo w „kiepskiej” jakości i jest stopniowo wyostrzany
– withMetadata usuwane są wszystkie metadane z pliku
– errorOnEnlargement pokazuje błędy jeżeli takowe się pojawią

Biblioteka jest bardzo szybka 137 zdjęć (ponad 550MB) w rozdzielczości 2700×1800 zajęło tej bibliotece 32s z ustawieniami globalnymi jak powyżej bez webp. Oczywiście szybkość zależy od hardwaru jaki posiadamy.

Więcej można przeczytać na githubie opisane są tam bardziej skomplikowane użycia tej biblioteki jak dostępne opcje konfiguracyjne.

Standard

Komentarze

Zostaw komentarz

Data publikacji

10/08/2018

Kategoria

CSS, HTML, JavaScript

Napisał

Axios oraz php wysłanie formularza.

Za pomocą axios wysyłam formularz.
Najpierw zbieram dane z formularzy, ustawiam content-type i wysyłam postem – axios.post

let data = {
    'imie-i-nazwisko': document.getElementById('name').value,
    'data-wydarzenia': document.getElementById('date').value
};

let config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    }
}
axios.post('mail.php', data, config)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

Następna rzecz okazała się dość problematyczna, a mianowicie sparsowanie jsona do zmiennej w php.
Całe clou to file_get_contents(‚php://input’)

$_POST = json_decode(file_get_contents('php://input'), true);

if($_POST) {
    $imie_i_nazwisko = trim($_POST['imie-i-nazwisko']);
    ...
}
Standard

Komentarze

Zostaw komentarz

Data publikacji

18/07/2018

Kategoria

JavaScript, PHP

Napisał

DOMContentLoaded async

Niestety jeżeli używamy async DOMContentLoaded nam nie zadziała.

<script type="text/javascript" src="./index.6da4.js" async>

Trochę mi zajęło zanim odkryłem ten problem. Lokalnie wszystko działało bo w webpaku w wersji developerskiej nie używam pluginu który dodaje async do script. Dopiero wersja produkcyjna posiada tą zmianę.

document.addEventListener("DOMContentLoaded", function() {
   const contact = new FormValidate('form');
   contact.init();
});

Przeszukanie sieci doprowadziło mnie do tego rozwiązania, działa nawet w IE9.

document.addEventListener('readystatechange', () => {
    if (document.readyState == "complete") {
        const contact = new FormValidate('form');
        contact.init();
    }
});
Standard

Komentarze

Zostaw komentarz

Data publikacji

17/07/2018

Kategoria

JavaScript

Napisał

addEventListener wiele zdarzeń

Zamiast wywoływać dwa razy tą samą funkcję.

document.addEventListener("click", taSamaFunkcja);
document.addEventListener("touchstart", taSamaFunkcja);

Możemy to zrobić tak jak poniżej

["change", "keyup", "click", "touchstart", "input", "..."].forEach(function(event) {
  document.querySelectorAll('.element').addEventListener(event, function() {
    // i tutaj co potrzeba
  }, false);
});
Standard

Komentarze

Zostaw komentarz

Data publikacji

08/07/2018

Kategoria

JavaScript

Napisał

Gulp ES6 z Babel

Do gulp instalujemy:

npm install babel-core babel-preset-es2015 --save-dev

W głównym folderze tworzymy plik:

.babelrc

W nim dodajemy zapis:

{
  "presets": [
    "es2015"
  ]
}

Aby zadziałał nam baabel z gulp należy zmodyfikować nazwę gulpfile.js na gulpfile.babel.js
Ja na wszelki wypadek duplikuję plik i zmieniam nazwę tak na wszelki wypadek i później dokonuję odpowiednich zmian w gulpfile.babel.js

'use strict';

import gulp from 'gulp';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';

const dir = {
  src: 'src',
  dest: 'build'
};

const sassPaths = {
  src: `${dir.src}/style.scss`,
  dest: `${dir.dest}/style/`
};

gulp.task('style', () => {
  return gulp.src(sassPaths.src)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', plugins.sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest(sassPaths.dest));
});

...
Standard

Komentarze

Zostaw komentarz

Data publikacji

08/06/2018

Kategoria

CSS, JavaScript

Napisał

Stworzenie sitemapy w node.js

Mały przyjemny kod 😉
Na początku pobieramy wszystkie pliki z foldera build za pomocą readdir, następnie pętelka po tych plikach. Robimy split po kropce aby dobrać się do rozszerzenia a interesuje nas oczywiście html
Jeżeli rozszerzeniem okaże się html to wszystko pakujemy do tablicy urlPart.
Na końcu budujemy xml sitemap i zapisujemy to przez writeFile i to tyle.

const fs = require("fs");

const htmlPlace = "build";
const ulrPart = [];

fs.readdir(`${htmlPlace}`, function (err, files) {
    if (err)
        throw err;
    for (let index in files) {
        let rest = files[index].split('.')[1];
        if (rest === 'html') {
            let path = `
                <url>
                    <loc>http://blog.grzegorztomicki.pl/${files[index]}</loc>
                    <changefreq>monthly</changefreq>
                </url>
            `;
            ulrPart.push(path);
        }

    }

    const template = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            ${ulrPart.join('')}</urlset>`;

    fs.writeFile(`./sitemap.xml`, template, function (err) {});
});
Standard

Komentarze

Zostaw komentarz

Data publikacji

08/06/2018

Kategoria

JavaScript, Node

Napisał

Ładowanie CSS i CSS modules w tym samym czasie Webpack

W react możemy importować css jak i css jako moduły.
Ale co jeśli chcemy zrobić do w tym samym czasie powiedzmy dodać globalny styl np. normalize.css?

Importowanie jako moduł:

import React from 'react'
import styles from './moj-komponent.css';

const MyComponent => <div className={styles.jakasKlasa}></div>

No ale jak użyć css powiedzmy jakieś zewnętrznej biblioteki:

import React from 'react'
import './moj-komponent-zewnetrzny.css';

const MyComponent => <div className="jakasKlasa"></div>

Aby tego dokonać należy zmodyfikować webpack. Ja korzystam z create-react-app i modyfikuję zarówno wersję dev jak i prod webpacka.

module: {
    rules: [
        {
            // wcześniej było /\.css$/
            test: /^(?!.*?\.module).*\.css$/,
           
            // dalej zostawiamy jak było czyli
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
                ...
        },
        // dodajemy następną regułę dla zewnętrznych css
        {
            test: /\.module\.css$/,
            use: [
                require.resolve('style-loader'),
                require.resolve('css-loader')
            ],
        },
    ]
}

Teraz możemy użyć w jednym komponencie zarówno css modułów jak i zewnętrznych bibliotek.
Należy pamiętać że zewnętrzny komponent musi mieć w nazwie *.module.css

import React from 'react'
import styles from './moj-komponent.css';
import './jakis-zewnetrzny.module.css'

const MyComponent => <div className={`${styles.jakasKlasa} jakas-klasa-z-zewnatrz`}></div>

W wersji produkcyjnej webpack kopiuję całą regułę css i wstawiam poniżej,
zmieniam test: /\.css$/, na test: /\.module\.css$/,
Ustawiam modules: false i tyle.

Standard

Komentarze

Zostaw komentarz

Data publikacji

19/03/2018

Kategoria

JavaScript, React

Napisał