当使用Webpack的Extract Text插件捆绑时，LESS导入无法工作

Question

我一直在开发中玩得很好，但由于某种原因，当我使用Extract Text Plugin将其捆绑到生产中时，导入功能不起作用。

对于下面的index.less文件:

@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;
}

我得到以下错误:

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;

我使用以下Webpack配置捆绑了它:

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

对于正在阅读这篇文章的人，我没有一个直接的答案，但是我确实通过切换到sass解决了这个问题。

我安装了sass-loader和node-sass，将文件名更改为.scss，然后简单地将变量更改为sass语法(即$而不是@)。一旦我在webpack中将less更改为sass，一切都工作了。我只能假设less-loader有问题，或者它与另一个加载器的兼容性有问题。

可能对有相同问题的人有用- SASS似乎在Webpack/React-land中得到更好的支持，所以如果可能的话，进行切换可能是一个好主意。