LESS CSS with NPM 在本地主机上不起作用，无法在 Sublime 3 中安装 LESS 包控件

LESS的超级初学者，不知道为什么我的样式没有显示。我以为前几天晚上我让它工作了，但看起来没有任何工作。

我确实尝试安装 LESS 包控件，但也失败了。我尝试手动并尝试将PHP代码复制到控制台中无济于事。不确定这是否可以少搞砸。

我还将Sublime右下角的选项更改为CSS，并在控制台中出现错误。很抱歉对此有点到处都是，但我希望对此有任何帮助。

这是代码：

.HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NPM Build System w/ Less</title>
    <link rel="stylesheet/less" href="css/index.less">
</head>
<body>
    <h1>Made with Love</h1>
    <h2>Built with NPM</h2>
</body>
</html>

少：

@baker-miller-pink: #FF91AF;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
body {
    background-color: @baker-miller-pink;
}
h1 {
    color: @nice-blue;
}

Package.json：

{
  "name": "npm-build-system",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "mkdir": "mkdir -p build",
    "build": "npm run clean && npm run mkdir && npm run build:html && npm run build:css",
    "watch": "npm run watch:html & npm run wathc:css",
    "clean": "rm -rf build",
    "build:html": "npm run clean:html && cp index.html build/",
    "clean:html": "rm -f build/index.html",
    "copy:index": "mv build/index.html ./",
    "watch:html": "npm run build:html && chokidar index.html -c 'npm run build:html'",
    "build:css" : "npm run clean:css && lessc --source-map css/index.less build/$npm_package_name.$npm_package_version.css",
    "watch:css" : "npm run build:css && chokidar 'css/**/*.less' -c 'npm run build:css'",
    "clean:css" : "rm -f build/$npm_package_name.$npm_package_version.css build/$npm_package_name.$npm_package_version.map",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chokidar-cli": "^1.2.0",
    "less": "^2.6.1"
  }
}

你需要 Grunt 或 Gulp 来规定依赖关系，如下所示：

less: {
            development: {
                options: {
                    compress: false,
                    optimization: 2,
                    sourceMap: true,
                    sourceMapFilename: './styles/style.css.map'
                },
                files: {
                    "app/styles/style.css": "app/styles/less/style.less"
                }
            },
}

相关内容

最新更新

热门标签：