Webpack＆PostCSSの機能ミックスは表示されません。

Question

現在のプロジェクトにはreact、webpack、postcssがあります。ここでの意図は、グローバルmixinを作成することです。私はいくつかの方法を試して、次の結果に至りました。

スタイルシートには影響を与えません。プロジェクト全体@mixin alohaかさえ、まだ定義されていないミックスインを使用した結果として、まず意思

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

module.exports = postCSSConfig; 

、どちらもエラーになります。

第2の意図。この時点で

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

それは@mixin alohaが定義されていないというエラーがスローされます。

WebPACKの設定

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' 
    }) 
    ], 
} 

あなたは私が間違っているかもしれないものを提案してくださいことはできますか？

Answer 1

postcss-loader - Usageに示すように、postcss.config.jsのエクスポートは、（インポートする必要がある）プラグインの配列を保持するpluginsプロパティを持つオブジェクトである必要があります。

そしてpostcss-mixinsは、自身がミックスインを持つオブジェクトであるプロパティmixin持つオブジェクトを取得しますが、postcss-mixins - Function Mixinは（ミックスインは、関数やオブジェクトにすることができます）を参照してください、直接それをただミックスインを与えています。

あなたpostcss.config.jsしたがって、次のようになります。

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