Webpack & PostCSS Fonction Les Mixins ne sont pas visibles

Question

Le projet en cours a réagi, webpack et postcss. L'intention ici est de créer un mixin global. J'ai essayé quelques façons et est venu aux résultats suivants.

Première intention

var postCSSConfig = [ 
    require('postcss-import'), 
    // require('precss'), 
    require('postcss-mixins')({ 
    aloha: { 
     color: 'red' 
    } 
    }), 
    require('postcss-cssnext')({ 
    browsers: ['last 2 versions', '> 5%'], 
    }), 
] 

module.exports = postCSSConfig; 

En conséquence à l'aide @mixin aloha à travers un projet ou mixins même pas encore défini n'affecte pas les feuilles de style, ni donne une erreur.

Deuxième intention.

module.exports = { 
    plugins: { 
    'postcss-import': {}, 
    'postcss-mixins': { 
     aloha: { 
     color: 'red' 
     } 
    }, 
    'precss': {}, 
    'postcss-cssnext': { 
    }, 
    }, 
}; 

A ce stade, il renvoie une erreur que @mixin aloha n'est pas défini.

Webpack config

const path = require('path'), 
     webpack = require('webpack'), 
     HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: [ 
    'react-hot-loader/patch' 
    'webpack-dev-server/client?http://localhost:8090', 
    'webpack/hot/only-dev-server', 
    './index.js' 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'build'), 
    publicPath: '/' 
    }, 

    context: path.resolve(__dirname, 'logic'), 
    devtool: 'inline-source-map', 
    devServer: { 
    hot: true, 
    contentBase: path.resolve(__dirname, 'build'), 
    publicPath: '/', 
    port: 8090 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     use: [ 
      'babel-loader', 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      'style-loader', 
      'css-loader?modules', 
      'postcss-loader', 
     ], 
     }, 
     { 
     test: /\.(jpg|png|svg)$/, 
     loader: 'url-loader', 
     options: { 
      limit: 25000, 
     }, 
     }, 
     { 
     test: /\.(ttf|eot|woff|woff2)$/, 
     loader: 'file-loader', 
     options: { 
      name: 'fonts/[name].[ext]', 
     }, 
     } 
    ], 
    }, 

    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new HtmlWebpackPlugin({ 
     template: './index.template.html' 
    }) 
    ], 
} 

Pouvez-vous s'il vous plaît suggérer ce qui pourrait me tromper?

Answer 1

L'exportation dans postcss.config.js doit être un objet avec une propriété plugins qui contient un tableau de vos plugins (que vous devez importer), comme indiqué dans postcss-loader - Usage.

Et le postcss-mixins prend un objet avec la propriété mixin qui est lui-même un objet avec mixins, mais vous donnez juste la mixins directement, voir postcss-mixins - Function Mixin (mixins peut être une fonction ou un objet).

Votre postcss.config.js devrait donc être:

module.exports = { 
    plugins: [ 
    require('postcss-import'), 
    // require('precss'), 
    require('postcss-mixins')({ 
     mixins: { 
     aloha: { 
      color: 'red' 
     } 
     } 
    }), 
    require('postcss-cssnext')({ 
     browsers: ['last 2 versions', '> 5%'], 
    }) 
    ] 
};