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

问题描述

我想编译 SCSS 文件并使用 autoprefixer。 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 这样的标志，所以我可以将内容传送到下一个命令。

你有什么建议吗？谢谢。

解决方法

我使用 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']);
};