最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】给Reactjs项目中添加less-loader支持css的less

CSS crifan 2840浏览 0评论

在:

【整理】webpack中output的path和publicPath和webpack-dev-server的devServer的contentBase和publicPath的区别和作用

之后,继续去给Webpack添加对应的功能。

此处是希望:

可以支持less的css文件。

参考官网:

起步

-》

Loaders

-》

less-loader

【总结】

➜  react-hot-boilerplate git:(master) ✗ npm install –save-dev less-loader less
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
added 53 packages in 15.262s

加上配置:

webpack.config.js

      {
        test: /\.less$/,
        use: [
          {
            loader: “style-loader” // creates style nodes from JS strings
          }, {
            loader: “css-loader” // translates CSS into CommonJS
          }, {
            loader: “less-loader” // compiles Less to CSS
          }
        ]
      },

然后把之前的app.css改为app.less试试

app.js

import ‘./app.less’;
<div className=”demo_image” />

app.less

@imgSize: 128px;
.demo_image {
    // width: 128px;
    // height: 128px;
    width: @imgSize;
    height: @imgSize;
    background-image: url(‘assets/img/user1-128×128.jpg’)
}

然后编译后,可以正常显示,可以看到css生效了:

转载请注明:在路上 » 【已解决】给Reactjs项目中添加less-loader支持css的less

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.286 seconds, using 22.08MB memory