Webpack＆PostCSS功能混合不可見

Question

當前項目有反應，webpack和postcss。這裏的意圖是創建全球混搭。我確實嘗試了幾種方法並得出以下結果。

首先意向

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

module.exports = postCSSConfig; 

由於使用@mixin aloha整個項目甚至還沒有定義混入不影響樣式表的結果，既不給出了一個錯誤。

第二意向。

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.config.js中的導出需要是包含plugins屬性的對象，該屬性包含您需要導入的插件數組，如postcss-loader - Usage所示。

而且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%'], 
    }) 
    ] 
};