在 sass 监视模式下使用 autoprefixer (NPM)

Question

我想编译 SCSS 个文件并使用自动前缀。 npm run build 将 SCSS 文件编译为 CSS 文件。然后我可以将这个完成的 CSS 文件用于 autoprefixer。

但我对 npm run watch（编译工作）有疑问。我找不到让 SASS 监视文件更改并将新文件内容重定向到 autoprefixer 的机会。

这是我的 package.json 第一个：

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "sass --watch --stop-on-error styles/scss/style.scss style.css",
    "build": "sass --stop-on-error --style=compressed styles/scss/style.scss style.css && npx postcss style.css --replace --use autoprefixer"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "postcss-cli": "^8.3.1",
    "sass": "^1.33.0"
  },
  "browserslist": [
    "> 1%",
    "last 4 versions",
    "not dead"
  ]
}

我已经试过了sass --watch --stop-on-error styles/scss/style.scss style.css && npx postcss style.css --replace --use autoprefixer。这是行不通的，因为第一个 sass 命令永远不会离开监视模式，因此永远不会执行 && npx postcss (...) 命令。而且我找不到像 --output-new-file-to-console 这样的标志，所以我可以将内容传递给下一个命令。

你有什么建议吗？谢谢。

Answer 1

我使用 Gruntfile.js 解决了我的问题。在那里，我使用 grunt-contrib-watch，它在每次更改我的 SCSS 文件时执行 sass 和 autoprefixer。

这是我的 package.json:

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.4.0",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-jshint": "^3.0.0",
    "grunt-contrib-sass": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0"
  },
  "browserslist": [
    "> 1%",
    "last 4 versions",
    "not dead"
  ]
}

Gruntfile.js:

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dev: {
                options: {

                },
                files: {
                    'style.css': 'styles/scss/style.scss'
                }
            },
            dist: {
                options: {
                    style: 'compressed',
                    sourcemap: false
                },
                files: {
                    'style.css': 'styles/scss/style.scss'
                }
            }
        },
        autoprefixer: {
            dev: {
                options: {
                    map: true
                },
                files: {
                    'style.css': 'style.css'
                }
            },
            dist: {
                options: {
                    map: false
                },
                files: {
                    'style.css': 'style.css'
                }
            }
        },
        watch: {
            css: {
                files: 'styles/scss/style.scss',
                tasks: [
                    'sass:dev', 
                    'autoprefixer:dev', 
                    'jshint'
                ]
            }
        },
        jshint: {
            all: ['Gruntfile.js', 'js/**/*.js']
        }
    });


    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // default task: watch SASS & autoprefix it & JSHint
    grunt.registerTask('default', ['watch']);

    // build SASS & autoprefix it & JSHint
    grunt.registerTask('build', [
        'sass:dist',
        'autoprefixer:dist',
        'jshint']);
};

Answer 2

您可以使用 npm-run-all 插件来并行运行两个命令。我这样使用的例子：

"scripts": {
    "sass-watch": "sass --watch scss/main.scss css/main.css",
    "postcss-watch": "postcss css/main.css -u autoprefixer -o css/mainpost.css --watch",
    "watch": "npm-run-all --parallel sass-watch postcss-watch"
}

在 sass 监视模式下使用 autoprefixer (NPM)

Using autoprefixer in sass watch mode (NPM)

sass

npm

autoprefixer

postcss