webpack3.6.0 使用less的踩坑记录

一个买来的老项目，用的是webpack3.6.0 + vue2.0 + vue-router3x + js,由于某些原因需要引入less文件

直接上正确的步骤

1. config目录下的index.js(webpack.config.js)添加loader

    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
    
     
        test: /\.less$/, 
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
    ]

2. 安装对应的依赖

// 不能安装太新的，安装下面的依赖即可
yarn add less-loader@4.1.0 style-loader@2.0.0 css-loader@3.0.0

"less-loader": "4.1.0",
"style-loader": "2.0.0",
"css-loader": "3.0.0",

3. 项目中使用的场景，大概有3种

1. 在vue的style里面使用

<style lang='less'>
</style>

2. 在vue的style里引入less文件

<style lang='less'>
	@import './my-theme/coustom.less';
</style>

3. 在main.js引入less文件

// 直接使用import './my-theme/coustom.less'会解析失败，我们需要通过将对应的loader添加到其中
import '!style-loader!css-loader!less-loader!./my-theme/coustom.less'

但是我跑起来告诉我缺少依赖sass-resources-loader， 然后我就安装了一个sass-resources-loader，没报错的可以不用管yarn add [email protected]