Autoprefixer css z pakietem sieci Web

Question

Próbowałem skonfigurować Webpack za pomocą LESS i Autoprefixer, ale autoprefixer nie działa. Moje pliki css lub mniej nie są automatycznie naprawione. Przykład: display: flex pobyty display: flex

Włożyłem moje WebPACK config poniżej:

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    entry: { 
    bundle: "./index.jsx" 
    }, 
    output: { 
    path: __dirname, 
    filename: "[name].js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /(node_modules|bower_components)/, 
     loaders: ['react-hot', 'babel-loader'] 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader") 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader") 
     } 

    ], 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    }, 
    plugins: [ 
    new webpack.BannerPlugin(banner), 
    new ExtractTextPlugin("style.css") 
    ], 
    devtool: 'source-map', 
    devServer: { 
    stats: 'warnings-only', 
    } 
}; 

Answer 1

Wystąpił problem. Silly me, blok postcss musi znajdować się bezpośrednio pod konfiguracją Webpack, umieściłem go w bloku modułów. Mój błąd.

EDIT: to jest jak powinno być:

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    ... 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    ... 
}; 

Zamiast więc umieszczenie go wewnątrz bloku modułów, miałem umieścić go bezpośrednio pod głównym bloku, jak pokazano powyżej.

Answer 2

Musisz skonfigurować postcss w WebPACK config dla starszych wersji przeglądarek.

Domyślnym ustawieniem autoprefiksu są dwie ostatnie wersje przeglądarek lub przeglądarek, które mają co najmniej 5% udziału w rynku.

https://github.com/postcss/autoprefixer#browsers

postcss: [ 
    autoprefixer({ 
     browsers: ['last 3 versions', '> 1%'] 
    }) 
    ], 

Mówi, że jesteś wspieranie 3 ostatnie wersje przeglądarek lub przeglądarek, które mają co najmniej 1% udziału w rynku.

Answer 3

Miałem podobny problem z Webpack 2.x.x, a właściwości niestandardowe nie są już dozwolone w konfiguracji. Znalazłem rozwiązanie tego innego posta S.O: Using auto prefixer with postcss in webpack 2.0. W przypadku, gdy z jakiegoś nieznanego powodu ten link doprowadziłoby do 404 skompilować najtrafniejsze odpowiedzi tutaj:

WebPACK 2.xx wprowadzony webpack.LoaderOptionsPlugin() wtyczki gdzie trzeba określić wszystkie pluginy opcji ładowarka . Podobnie jak autoprefixer jest wtyczką dla postcss-loader. Musi więc iść tutaj. Nowa konfiguracja powinna wyglądać następująco:

module: { 
    rules: [ 
    { 
     test: /\.scss$/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader', 
     'postcss-loader'] 
    } 
    ] 
}, 

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
    options: { 
     postcss: [ 
     autoprefixer(), 
     ] 
    } 
    }) 
], 

Ten pracował dla mnie, ale jak wspomniano przez Kreig nie ma potrzeby LoaderOptionsPlugin(). Teraz można przejść bezpośrednio do opcji deklaracji ładowarka:

const autoprefixer = require('autoprefixer'); 

let settings = { 
/*...*/ 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     use: [ 
      /*...other loaders...*/ 
      { 
      loader: 'postcss-loader', 
       options: { 
       plugins: function() { 
        return [autoprefixer] 
       } 
       } 
      } 
      /*...other loaders...*/ 
     ] 
    }] 
    }   
} 
/*...*/ 

Thing jest Próbowałem 2nd z Webpack 2.5.1, ale nie udało się. Kredyty trafiają do Pranesh Ravi i Kreig.