Webpack环境下导入Less文件styles为undefined问题求助

核心问题原因 #

1. CSS Modules未启用：你的css-loader配置中modules: false，这会导致less文件不会导出样式对象，所以import styles from './index.less'得到的是undefined。
2. 构建工具插件冲突：同时使用style-loader和MiniCssExtractPlugin，前者将样式注入JS runtime，后者将样式提取为独立文件，二者不能同时生效；另外配置中重复实例化了MiniCssExtractPlugin，属于冗余配置。
3. 冗余插件配置：webpack.optimize.SplitChunksPlugin已经在optimization.splitChunks中配置，无需在plugins中重复添加。

具体修复步骤 #

1. 启用CSS Modules #

修改less对应的loader规则，将css-loader的modules设为true（可自定义类名格式方便调试）：

{
  test: /\.less$/i,
  use: [
    // 根据环境二选一：生产环境用提取插件，开发环境用style-loader提升构建速度
    process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
      }
    },
    'postcss-loader',
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  ]
}

2. 修复插件冲突与冗余配置 #

• 删除plugins中重复的new MiniCssExtractPlugin(...)实例
• 删除plugins中的new webpack.optimize.SplitChunksPlugin()，因为optimization.splitChunks已配置
• 确保style-loader和MiniCssExtractPlugin.loader根据环境切换

修改后的plugins配置：

plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(rootDir, 'public/index.html'),
    inject: 'body',
    scriptLoading: 'blocking'
  }),
  new MiniCssExtractPlugin({
    filename: 'css/[name].css'
  }),
  new CopyWebpackPlugin({
    patterns: [
      {
        from: '*.js',
        context: path.resolve(rootDir, 'public/js'),
        to: path.resolve(rootDir, 'dist/js')
      }
    ]
  })
]

3. 可选：TypeScript类型声明（若使用TS） #

在src目录下新建typings.d.ts文件，添加less模块的类型声明，避免类型报错：

declare module '*.less' {
  const classes: { [key: string]: string };
  export default classes;
}

验证修改 #

重启webpack构建后，console.log(styles)会输出包含login属性的对象，页面也能正确应用样式。

内容的提问来源于stack exchange，提问作者Up Pu