1

我的webpack.config.dev.js文件中有以下配置

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');
const webpackMerge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const baseConfig = require('./webpack.config.js');

module.exports = webpackMerge(baseConfig, {

  mode: 'development',

  devtool: 'inline-source-map',

  module: {
    rules: [{
      // SVG Less style loader
      test: /svg\.less$/,
      use: [
        'to-string-loader',
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        },
        'postcss-loader', {
          loader: 'less-loader',
          options: {
            sourceMap: true
          }
        }
      ]
    }, {
      // Less style loader
      test: /.*(?<!svg)\.less$/,
      use: [MiniCssExtractPlugin.loader, {
        loader: 'css-loader',
        options: {
          sourceMap: true
        }
      }, {
        loader: 'less-loader',
        options: {
          sourceMap: true
        }
      }]
    }]
  },

  devServer: {
    compress: true,
    host: '127.0.0.1',
    port: 8080,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    stats: {
      color: true
    }
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new ForkTsCheckerWebpackPlugin({
      tsconfig: path.join(__dirname, './tsconfig.json')
    })
  ]

});

下面还给出了webpack版本

"webpack": "4.6.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.7",
"webpack-merge": "^4.1.4"

当我这样做时，我会yarn install出错。但是模块正在安装并且yarn serve可以正常工作

 ERROR in ./styles/main.less
    Module parse failed: Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.

如果有人可以提供帮助，我们将不胜感激。提前致谢

4

0 回答 0