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

力气
  • 158
<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')
    }
};

图片描述

回复
阅读 3.9k
10 个回答

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

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

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

module.exports = {
     module: {
        rules: [
            {
                test: /\.less$/,
                use: ['less-loader'] <---添加less-loader
            }
        ]
    },
}
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')
    }
};

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

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

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

CSS魔法
  • 1
新手上路,请多包涵

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

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

<script src="less.js" data-env="development"></script>

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

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

你知道吗?

宣传栏