js中import less文件后使用webpack打包时报错

Question

想用webpack搭个小项目,没想到在less这里就卡住了,运行npm run build打包时提示以下错误

ERROR in ./src/style/index.less
Module parse failed: C:\webpackApp\src\style\index.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @mainColor:#fc9032;
|
| html,body{
 @ ./src/m1.js 1:0-28

不引入less文件后一切正常.但是又苦于找不出问题在哪里,想请高手帮忙看看.

package.json:

{
  "name": "y",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "css-emitter": "^0.0.1",
    "css-loader": "^0.28.7",
    "emitter": "^0.0.5",
    "file-loader": "^0.11.2",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.4",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5"
  }
}

webpack.config.js:

const path = require('path') //引入path模块 

module.exports = {
    entry: './src/m1.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'app')
    },
    module: {
        rules: [
            {
                test: /\.(less|css)$/,
                use: ['style-loader','css-loader','less-loader']
            }
        ],
         rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
          ]
    }
}

m1.js:

import './style/index.less';  // 引入less,但是打包期间报错
import _ from 'lodash';
import {plane} from './m2'

let container = document.getElementById('app')
let dict = [{name:'mike', age:18}, {name:'jack', age:22}, {name:'tim', age:23}]
let target = _.findIndex(dict, {name:'tim'})
window.alert(dict[target].age)

index.less

@mainColor:#fc9032;

html,body{ 
    width : 100%;
    height : 100%;    
}

Answer 1

把你的webpack.config.js中的module模块修改成如下配置即可。

    module: {
        rules: [
            {
                test: /\.(less|css)$/,
                use:[ 'style-loader','css-loader','less-loader'],
            },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ],
       
    }

Answer 2

config文件的rules可以合并

Answer 3

建议你按官方教程再走一遍

Answer 4

https://segmentfault.com/a/11...
先参考下 是1.x的写法.

Answer 5

我之前跟你差不多类似的问题，应该是配置的问题
你可以按我这样试试

loaders: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              extractCSS: true
            }
          },
          {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                  fallback:"style-loader",
                  use:"css-loader"
              })
          },
          {
              test: /\.scss$/,
              use: ExtractTextPlugin.extract({
                  fallback:"style-loader",
                  use:"scss-loader"
                 
              })
          },
          
          {
              test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
              loader: 'url-loader?limite=8192'   // limit 是转换base64的文件大小的阀值8兆
          },
          {
              test: /\.html$/,
              loader: 'html-loader'    // 可以用来加载模板
          }