npm with node-sass and autoprefixer

前端 未结 3 1375
囚心锁ツ
囚心锁ツ 2021-01-31 04:59

I use node-sass to compile all my Sass files to a master.css. This works well but now I want to add prefixes. I would like to use only the npm, no Gulp or Grunt.

Here my

相关标签:
3条回答
  • 2021-01-31 05:05

    Sass With Node Js (with 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"
    }
    

    Terminal command to build: npm run build

    0 讨论(0)
  • 2021-01-31 05:13
     {
        "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/*"
        }
    }
    

    You need postcss and postcss-cli as a devDependency.

    0 讨论(0)
  • 2021-01-31 05:20

    Let's say we have styles.sass file in sass directory. I've used something like this (my package.json):

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

    terminal command: npm run w. At this point each saving of styles.sass file will produce compiled and prefixed styles.css file automatically. I have postcss-cli, node-sass and watch packages installed globally.

    0 讨论(0)
提交回复
热议问题