WebpackのExtract Textプラグインを使用してバンドルされたときにインポートが機能しない

Question

私は開発が少なくて済みましたが、Extract Text Pluginを使用してプロダクション用にバンドルする何らかの理由でインポート機能が動作しません。私は、次のWebPACKの設定を使用して、これを同梱している

Module build failed: variable @font-family is undefined 
@ /Users/mattdalton/WebStorm Projects/react-comments/client/src/index.less  (line 5, column 15) 
near lines: 
    .h1, .h2, .h3, .h4, .h5, .h6 { 
    font-family: @font-family; 
    font-weight: @headings-font-weight; 

：私は次のエラーを取得する

@import 'global-styles/variables.less'; 

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 { 
    font-family: @font-family; 
    font-weight: @headings-font-weight; 
} 

：以下index.lessファイルについては

は

module.exports = { 
    bail: true, 
    devtool: 'source-map', 
    entry: [ 
    require.resolve('./polyfills'), 
    path.join(paths.appSrc, 'index') 
    ], 
    output: { 
    path: paths.appBuild, 
    filename: 'static/js/[name].[chunkhash:8].js', 
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', 
    publicPath: publicPath 
    }, 
    resolve: { 
    extensions: ['.js', '.json', ''], 
    alias: { 
     'react-native': 'react-native-web' 
    } 
    }, 
    loaders: [ 
    { 
    test: /\.js$/, 
    include: paths.appSrc, 
    loader: 'babel', 
    query: require('./babel.prod') 
    }, 
    { 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss') 
    }, 
    { 
    test: /\.less$/, 
    loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss!less') 
    }, 
//..... 
    postcss: function() { 
    return [ 
     autoprefixer({ 
     browsers: [ 
      '>1%', 
      'last 4 versions', 
      'Firefox ESR', 
      'not ie < 9', 
     ] 
     }), 
    ]; 
    }, 
    plugins: [ 
    // Generates an `index.html` file with the <script> injected. 
    new HtmlWebpackPlugin({ 
     inject: true, 
     template: paths.appHtml, 
     minify: { 
     removeComments: true, 
     collapseWhitespace: true, 
     removeRedundantAttributes: true, 
     useShortDoctype: true, 
     removeEmptyAttributes: true, 
     removeStyleLinkTypeAttributes: true, 
     keepClosingSlash: true, 
     minifyJS: true, 
     minifyCSS: true, 
     minifyURLs: true 
     } 
    }), 
    new webpack.DefinePlugin(env), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
    }, 
     mangle: { 
     screw_ie8: true 
     }, 
     output: { 
     comments: false, 
     screw_ie8: true 
     } 
    }), 
    new ExtractTextPlugin('static/css/[name].[contenthash:8].css') 
    ] 
}; 

私が試してみましたこれは、いくつかの異なるコンポーネントの少ないファイルと私は同じ問題があります。

アイデア？

Answer 1

これを読んでいる人には、私は質問に直接答えはありませんが、私は悲鳴に切り替えるだけで解決しました。

とnode-sassがインストールされ、ファイル名が.scssに変更されました。次に、変数をsass構文（@ではなく$）に変更しました。一度私がlessをsassに変更したのは、すべてがうまくいった。私は、ローダーや他のローダーとの互換性に問題があると仮定することができます。

同じ問題を抱えている人には役に立つかもしれません - SASSはWebpack/React-landでサポートされているようですので、可能であればスイッチを切り替えることをお勧めします。