V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yantianqi
V2EX  ›  程序员

webpack 中 less 热加载

  •  
  •   yantianqi · 2017-09-06 10:30:17 +08:00 · 2422 次点击
    这是一个创建于 2445 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在 vue 文件中的

    <style lang="less">
    //这里写 css 热加载后样式不对,应该是没有编译,只有刷新后样式才会正确
    </style>
    

    配置了 webpack

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

    在 vue-loader 中配置 options 还是不行?

    options: {
      loaders: {
        less: {
          use: ['style-loader', 'css-loader', 'less-loader']
        }
      }
    }
    

    应该怎么配置呢?

    2 条回复    2017-09-06 18:11:18 +08:00
    Eoss
        1
    Eoss  
       2017-09-06 11:39:59 +08:00
    ```
    options: {
    loaders: {
    less: 'style-loader!css-loader!less-loader'
    }
    }
    ```
    https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html
    hevi
        2
    hevi  
       2017-09-06 18:11:18 +08:00
    https://doc.webpack-china.org/loaders/less-loader

    //修改 webpack 配置文件
    // webpack.config.js
    module.exports = {
    ...
    module: {
    rules: [{
    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
    }]
    }]
    }
    };
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   894 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 21:30 · PVG 05:30 · LAX 14:30 · JFK 17:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.