问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

我的第一个less练习项目，为什么我引入less文件，界面没有变化？

头像
力气
    15812140
    <html>
<head>
    <title>Nested Directives</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less">
</head>
<body class="container">
    <h1>Example using Nested Directives</h1>
    <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
    <script src="less.js" type="text/javascript"></script>
</body>
</html>

    .container{
  h1{
    font-size: 25px;
    color:#E45456;
  }
  p{
    font-size: 25px;
    color:#3C7949;
  }

  .myclass{
    h1{
      font-size: 25px;
      color:#E45456;
    }
    p{
      font-size: 25px;
      color:#3C7949;
    }
  }
}

    能不能帮我改一下？在 le1 文件夹内-->链接

    修改

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ]
            }
        ]
            /*
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    // fallback: 'style-loader',
                    // use: 'css-loader!less-loader'
                    use: [
                        'style-loader',
                        'less-loader'
                    ]
                })
            }
            */
    },
    /*
    // 生成 index.html 文件
    plugins:[
        new HtmlWebpackPlugin({
            title: 'Development'
        })
    ],
    */
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

    图片描述

    reactless前端
    阅读 7.6k
    10 个回答
    得票最新
    头像
    spencerht
      7.8k2728

      less是需要编译成css才能够正常使用的。。

      补充：
      gulp编译 http://www.jianshu.com/p/2294...
      直接命令行编译(虽然并不推荐但是也算是一种方法) http://blog.csdn.net/gyq04551...
      webpack的。暂时还是不推荐给你了。。要加的东西太多。
      不会就要学，不自己动手怎么能够用好。

      头像
      John
        193

        看了你的项目，你需要安装npm less-loader --save-dev
        webpack.common.js中添加

        module.exports = {
     module: {
        rules: [
            {
                test: /\.less$/,
                use: ['less-loader'] <---添加less-loader
            }
        ]
    },
}
        头像
        Assassin丶
          19017
          头像
          力气
            15812140
            const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ]
            }
        ]
            /*
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    // fallback: 'style-loader',
                    // use: 'css-loader!less-loader'
                    use: [
                        'style-loader',
                        'less-loader'
                    ]
                })
            }
            */
    },
    /*
    // 生成 index.html 文件
    plugins:[
        new HtmlWebpackPlugin({
            title: 'Development'
        })
    ],
    */
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};
            头像
            jacksplwxy
              1391020

              路径写对没？按F12打开调试工具，看看你写的这些样式是否作用到元素上了？.less、.sass这类文件都要写编译成.css文件才能起作用

              头像
              小刘
                53316206389

                使用test: /\.less$/查找 less 文件

                头像
                苹果
                  11962435

                  下一个koala将less文件编译成css文件

                  头像
                  CSS魔法
                    1
                    新手上路，请多包涵

                    Less 需要编译成 CSS 才能被浏览器识别。Less 可以动态地在浏览器中编译，也可以用外部的构建工具来做编译。题主想要的可能是前一种方式？

                    我看了一眼官方文章，在引入 less.js 时可以尝试这样写：

                    <script src="less.js" data-env="development"></script>
                    头像
                    善良的乌贼
                      3.7k11436

                      less 需要编译成 css才能运行。。之前的回答也推荐了很多编译的工具，如果实在不会使用构建工具，，那么下一个 koala 把，不需要命令，把文件拉进去就行了

                      头像
                      沐风
                        1621511

                        Chrome没有办法直接跑的，在浏览器里运行less的话要用Firefox浏览器就行了

                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题