语法错误：在 npm 启动期间，.less 文件中带有 @import 的令牌无效或意外

编程问答 2022-06-02

问题描述

这是使用 antd（Ant Design）使用 create-react-app (CRA) 创建的 React 应用程序。现有项目已被修改以尝试进行服务器端渲染 (SSR)。

npm run build 工作正常。

在那之后是错误发生的时候。 npm start：

/Users/user/dev/reactappname/node_modules/antd/lib/style/index.less:1
@import './themes/index';
^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)

可能是 webpack 的问题，但我不确定。

webpack.config.server.js:

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './server.js',output: {
    filename: 'server.js',path: path.resolve(__dirname,'build')
  },resolve: {
    modules: [path.resolve(__dirname,'src'),'node_modules'],extensions: ['.js','.jsx','.less']
  },target: 'node',node: {
    __dirname: false,},externals: [nodeExternals()],module: {
    rules: [
{
    test: /\.less$/,use: [
        {
            loader: 'style-loader'
        },{
            loader: 'css-loader'
        },{
            loader: 'less-loader',options: {
                javascriptEnabled: true
            }
        }]
},{
        test: /\.js$/,exclude: /node_modules/,use: 'babel-loader',{
        exclude: [/\.js$/,/\.html$/,/\.json$/],loader: 'file-loader',options: {
          name: 'static/media/[name].[hash:8].[ext]',publicPath: '/',emitFile: false,],};

.babelrc:

{
  "presets": [
    "@babel/preset-react",[
      "@babel/preset-env",{
        "targets": {
          "node": "current"
        }
      }
    ]
  ],"plugins": [
        [ "babel-plugin-transform-require-ignore",{
            "extensions": [".less",".sass"]
          }],"@babel/plugin-proposal-class-properties","babel-plugin-root-import",["import",{ "libraryName": "antd","style": true}]
  ]
}

解决方法

这是服务器的 webpack 配置，因此您需要在 webpack 中使用 MiniCssExtractPlugin 将 css/less/sass 文件发送到 build/css。然后在服务器端，注入指向 build/css 中的 css/less/sass 文件的脚本。

例如用于纯 css 的 webpack 配置（您需要在您的情况下添加较少的支持）

{
  test: /\.(css|less)$/i,use: [
    {
      loader: MiniCssExtractPlugin.loader
    },{
      loader: 'css-loader'
    },{
      loader: 'less-loader',options: {
        javascriptEnabled: true
      }
    }
  ]
}

让我们假设这个 webpack 会发出这个文件 build/css/main.css。然后，你的 server.js 看起来像这样：

app.use("*",(req,res) => {
  let htmlData = fs.readFileSync("build/index.html","utf8");
  const cssData = fs.readFileSync("build/css/main.css","utf8");
  htmlData = htmlData.replace("</head>",`<style>${cssData}</style></head>`);
});

如果这还不足以使其正常工作，您将需要为 LESS 配置更多。

lessreactjsreactjsreactjsreactjswebpackwebpackwebpack