Webpack & PostCSS 기능 믹스가 표시되지 않습니다.

Question

현재 프로젝트에는 react, webpack 및 postcss가 있습니다. 여기서 의도는 글로벌 믹스 인을 만드는 것입니다. 나는 몇 가지 방법을 시도하고 다음 결과를 얻었습니다.

스타일에 영향을주지 않습니다 프로젝트에서 @mixin aloha 또는 아직 정의되지 않은 유지 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; 

,도 오류가 있습니다.

두 번째 의도. 이때

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

그것은 @mixin aloha가 정의되지 않은 것을 에러가 발생.

웹팩 설정

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의 내보내기는 postcss-loader - Usage과 같이 (가져올 필요가있는) 플러그인 배열을 보유하는 plugins 속성이있는 객체 여야합니다.

그리고 postcss-mixins 자체는 유지 mixin을 가진 객체는 해당 부동산 mixin과 오브젝트를,하지만 당신은 postcss-mixins - Function Mixin합니다 (유지 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%'], 
    }) 
    ] 
};