Skip to content

OzzyCzech/webpack2-postcss-cssnext

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Webpack 2 + PostCSS + CSSnext

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published