css - 使用 Webpack 的提取文本插件捆绑时，LESS 导入不起作用

Question

我在开发中一直在玩 less，但由于某种原因，当我使用提取文本插件将其捆绑用于生产时，导入功能不起作用。

对于下面的 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 中得到更好的支持，所以如果可能的话，进行切换可能是个好主意。