如何解决在 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']);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。