webpack2 - webpack从1升级到3的时候，less引入的问题

问题描述

问 题

问题已经解决，由采纳答案者提醒了下，是我大意忘记添加less-loader，添加完毕以后，2个问题均解决。

webpack

{
    test: /\.less$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          sourcemap: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      //新增less-loader即可
      {
        loader: "less-loader" 
      },
      {
        loader: 'postcss-loader',
      }
    ],
    include: paths.appSrc
},

配置完以后，less文件中若涉及以下2个问题的时候，会报错：

问题1: 当less里引入路径，是经过webpack resolve过后的，会编译不通过。

test.less

.test{
    background: url(webpackConfigPath/logo.png);
}

webpack

resolve: {
// ...
    alias: {
      'webpackConfigPath': paths.appSrc,
    },
//...
}

问题2:无法使用less里的层叠关系

.a{
    background: red;
    .b{
        font-size: 12px;
    }
}

<p className={style.b}></p> //获取不到样式

解决方案

less 不是需要 less-loader 吗？

这篇关于webpack2 - webpack从1升级到3的时候，less引入的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！