带有 node-sass 和 autoprefixer 的 npm

Posted 2023-02-21

【中文标题】带有 node-sass 和 autoprefixer 的 npm

【英文标题】：npm with node-sass and autoprefixer

【发布时间】：2016-05-13 21:02:51

【问题描述】：

我使用 node-sass 将我所有的 Sass 文件编译为 master.css。 这很好用，但现在我想添加前缀。我只想使用 npm，不使用 Gulp 或 Grunt。

这是我的 package.json 文件：

  "name": "xxxxxx.com",
  "version": "1.0.0",
  "description": "",
  "watches": 
    "sass": "src/scss/**"
  ,
  "scripts": 
    "sass": "node-sass src/scss/master.scss -o dist/css/ --style compressed",
    "prefix": "postcss --use autoprefixer dist/css/master.css -d dist/css/master.css",
    "dev": "rerun-script"
  ,
  "author": "Jan",
  "license": "ISC",
  "devDependencies": 
    "autoprefixer": "^6.3.1",
    "browserify": "^13.0.0",
    "clean-css": "^3.4.9",
    "node-sass": "^3.4.2",
    "postcss-cli": "^2.5.0",
    "rerun-script": "^0.6.0",
    "uglifyjs": "^2.4.10"
  

我没有让它运行。我使用 autoprefixer 和 postcss-cli。这些模块已本地安装在项目目录中。我认为我的“脚本”部分是错误的。 看起来怎么样？

【参考方案1】：

Sass 与 Node Js（带有 Autoprefixer）

npm i -D autoprefixer clean-css-cli node-sass postcss-cli

  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": 
    "autoprefixer": "^9.5.1",
    "browserslist": "^4.5.4",
    "clean-css-cli": "^4.3.0",
    "node-sass": "^4.11.0",
    "postcss": "^7.0.14",
    "postcss-cli": "^6.1.2"
  ,
  "devDependencies": ,
  "scripts": 
    "clean": "rimraf scss",
    "compile": "node-sass --output-style=expanded --source-map=true css/scss/main.scss css/scss/main.css",
    "prefix": "postcss css/scss/main.css --use=autoprefixer --map=false --output=css/scss/main.css",
    "minify": "cleancss --level=1 --source-map --source-map-inline-sources --output css/scss/main.min.css css/scss/main.css",
    "dev": "npm run compile -- --watch",
    "build": "npm run clean && npm run compile && npm run prefix && npm run minify",
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "browserslist": [
    "last 4 version"
  ],
  "author": "",
  "license": "ISC"

要构建的终端命令：npm run build

【讨论】：

在 'dev' 编译完 scss 后如何添加 'prefix' 脚本？我尝试过这种方式："compile": "node-sass --output-style=expanded --source-map=true css/scss/main.scss css/scss/main.css && npm run prefix" 但似乎从来没有达到前缀脚本

+1 帮助了我很多。但是有两个注意事项：1）干净的脚本毫无意义且令人困惑。也许你的项目中有一个 scss 文件夹，但脚本没有创建一个。 2) 对于当前版本的 clean-css，它是 -O 1 (capitol oh) 而不是 --level=1

【参考方案2】：

假设我们在 sass 目录中有 styles.sass 文件。我用过这样的东西（我的 package.json）：

 "scripts": 
    "c":"node-sass sass/styles.sass -o .|postcss styles.css -u autoprefixer -r",
    "w":"watch 'npm run c' sass"
 
   

终端命令：npm run w。此时每次保存styles.sass 文件都会自动生成编译好的前缀styles.css 文件。我已经全局安装了 postcss-cli、node-sass 和 watch 包。

【参考方案3】：

 
    "name": "npm-node-sass",
    "version": "0.0.1",
    "devDependencies": 
        "autoprefixer": "^6.3.3",
        "browserify": "^13.0.0",
        "cssnano": "^3.5.2",
        "jshint": "^2.9.1",
        "node-sass": "^3.4.2",
        "postcss": "^5.0.16",
        "postcss-cli": "^2.5.1",
        "watch": "^0.17.1"
    ,
    "scripts": 
        "prebuild:css": "node-sass --include-path scss src/sass/styles.scss    public/css/styles.css",
        "build:css": "postcss --use autoprefixer -b 'last 2 versions' < public/css/styles.css | postcss --use cssnano > public/css/styles.min.css",
        "lint": "jshint src/js/*.js",
        "build:js": "browserify src/js/main.js > public/js/bundle.js",
        "build": "npm run build:css && npm run build:js",
        "prebuild:js": "npm run lint",
        "build:watch": "watch 'npm run build' src/*"
    

你需要 postcss 和 postcss-cli 作为 devDependency。

【讨论】：

每次编辑文件时都会重建所有文件吗？

您好，如何在这一行中向自动前缀添加更多版本？ "build:css": "postcss --use autoprefixer -b 'last 2 versions' public/css/styles.min.css"，比如我想添加ie11和chrome最新版本。在我的情况下，我使用 Windows，所以我需要像这样转义引号： "build:css": "postcss --use autoprefixer -b \"last 2 versions\" css/styles.min.css"，问候