Skip to content
Webpack 2 + PostCSS + CSSnext
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
package.json
postcss.config.js
readme.md
webpack.config.babel.js
yarn.lock

readme.md

Webpack 2 + PostCSS + CSSnext

LESS a SASS jsou mrtvé! Ať žije PostCSS a CSSnext! :-)

Tohle repo je příklad toho, jak rozchodit ve své aplikaci postcss s využitím Webpack2 a Yarn - jdeme na věc:

  1. Začneme instalací potřebných balíčků:

     yarn add --dev extract-text-webpack-plugin css-loader
     yarn add --dev postcss postcss-loader postcss-cssnext postcss-import
    

    Slovníček:

    • extract-text-webpack-plugin nám extrahuje CSS soubory do statických souborů (proč? cache, HTTP2, přehlednost)
    • css-loader bude náš fallback, pokud se nepovede extrahovat CSS soubory (vhodne také pri dev modu a hot reload, protože vkládá CSS přímo do JS kódu)
    • postcss je nástroje pro transformaci CSS pomocí JavaScript
    • postcss-loader je webpack loader pro postcss
    • postcss-cssnext je rozšíření postcss přidává podporu nového CSS pro starší browsery CSSnext
    • postcss-import PostCSS plugin pro inline @import
  2. Upravíme svůj webpack.config.js přidáním nového pravidla:

     module: {
       rules: [
         {
           test: /\.css$/,
           use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: ['css-loader', 'postcss-loader']
           })
         }
       ]
     },
    
  3. Vygenerovaný CSS soubor se bude chtít ukládat do dist/style.css proto přidáme do webpack.config.js následující:

     plugins: [
       new ExtractTextPlugin("style.css"),
     ]
    

    a ověříme, že již obsahuje definovanou cestu

     output: {
       path: path.resolve(__dirname, 'dist'),			
     },
    
  4. Nastavíme postcss - konfigurace jsou nově načítány ze souboru ./postcss.config.js

     module.exports = {
       plugins: {
         'postcss-import': {},
         'postcss-cssnext': {
           browsers: ['last 2 versions', '> 5%'],
         },
       },
     };
    
  5. Spustíme yarn run build - který máme nastavený v package.json následovně:

     "scripts": {
       "build": "webpack --progress --colors"
     }
    
  6. Pokud budeme potřebovat načítat v CSS statické soubory, například obrázky přes url(), budeme muset přidat následující:

     yarn add --dev img-loader file-loader url-loader
    

    A ještě upravit webpack.config.js přidáním url-loader a img-loader:

     {
       test: /\.(jpe?g|png|gif|svg)$/i,
       use: [ 'url-loader?limit=10000', 'img-loader']
     }
    

Použité zdroje

PS: babel je zde pouze z důvodu použití ES6 syntaxe v webpack.config.babel.js

You can’t perform that action at this time.