Использование автопрефиксера в режиме просмотра sass (NPM)

Я хочу скомпилировать файлы SCSS и использовать автопрефиксер. npm run build компилирует файл SCSS в файл CSS. Затем я могу использовать этот готовый файл CSS для автопрефиксера.

Но у меня проблема с npm run watch (компиляция работает). Я не смог найти возможность позволить SASS следить за изменениями файлов и перенаправлять содержимое нового файла в автопрефиксер.

Вот мой 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, чтобы передать содержимое следующей команде.

У Вас есть какие-то предложения? Спасибо.


npm sass postcss autoprefixer
person kanka.dev    schedule 22.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я решил свою проблему, используя Gruntfile.js. Там я использую grunt-contrib-watch, который выполняет sass и autoprefixer каждый раз, когда мой файл SCSS изменяется.

Вот мой 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']);
};
person kanka.dev    schedule 22.05.2021