首页 文章

npm with node-sass和autoprefixer

提问于
浏览
12

我使用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 . 这些模块已在本地安装在项目目录中 . 我认为我的“剧本”部分是错误的 . 那看起来怎么样?

2 回答

  • 23
    {
        "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 .

  • 1

    假设我们在 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包 .

相关问题