Webpack 和 PostCSS 函数混合不可见

Question

当前项目有 react、webpack 和 postcss。这里的目的是创建全局 mixin。我确实尝试了几种方法并得出了以下结果。

初衷

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 甚至尚未定义的 mixins 都不会影响样式表，也不会产生错误。

第二个意图。

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 的对象，该对象本身就是一个带有 mixins 的对象，但你只是直接给它 mixins，请参阅postcss-mixins - Function Mixin（mixins 可以是一个函数或一个对象）。

因此，您的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%'],
    })
  ]
};