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后，一切正常。我只能假设在较少的加载器中存在问题或者它与另一个加载器的兼容性。

对于有相同问题的人可能会有用 - 无论如何，SASS似乎在Webpack / React-land中得到更好的支持，所以如果你有可能做出转换可能是一个好主意。

使用Webpack的Extract Text插件捆绑时，LESS导入不起作用

1 个答案: