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

第二个意图。

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所示。< / p>

postcss-mixins使用属性mixin获取一个对象，该属性本身就是mixins的对象，但您只是直接给它混合，请参阅postcss-mixins - Function Mixin（ 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%'],
    })
  ]
};

Webpack＆amp; PostCSS功能混合不可见

1 个答案: