试图了解构建我的 sass 下划线元素的最佳实践。
我有一个使用 npm 和 grunt 的基本工作环境，并编译了我的主要 css，但我想在子文件夹中创建多个页面模板，并将它们各自的 .scss 文件输出到/layout 文件夹中，以便我可以在 function.php 中的主样式表之后将单独的页面模板样式表作为 .css 排队
我大致按照以下顺序构建我的元素文件://更新//
.gitignore
404.php
archive.php
comments.php
/compiled
style-human.css // Readable CSS Before prefixing //
style.css // Minified CSS Before Prefixing //
/page-layouts
page-frontage.human.css // Readable page-template CSS before prefixing //
page-frontage.css // minified page-template CSS before prefixing //
/fonts
footer.php
functions.php
gruntfile.js
header.php
/inc
index.php
/js
/languages
/node_modules
package.json
/page-layouts
page-frontage.css // prefixed minified CSS to be Enqueued after main style.css in functions.php //
page-frontage-human.css // prefixed readable CSS //
/page-templates
page-frontpage.php
page.php
rtl.css
/sass
_normalize.scss
/elements
/forms
/layout
_footer
_header
/page-layouts
_page-frontpage.scss
/media
/mixins
/modules
/navigation
/site
style.css // @imports everything SCSS except page-layouts //
/variables-site
search.php
sidebar.php
single.php
style-human.css // readable main stylesheet //
style.css // minified main stylesheet Enqueued in functions.php //
/template-parts
这是我在 gruntfile.js 中使用的代码
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/**
* sass task
*/
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none',
},
files: {
'compiled/style-human.css': 'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none',
},
files: {
'compiled/style.css': 'sass/style.scss'
}
}
},
/**
* Autoprefixer
*/
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
// prefix all files //
multiple_files: {
expand: true,
flatten: true,
src: 'compiled/*.css',
dest: ''
}
},
/**
* Watch task
*/
watch: {
css: {
files: '**/*scss',
tasks: ['sass','autoprefixer']
}
}
});
grunt.loadNpmTasks ('grunt-contrib-sass');
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-autoprefixer');
grunt.registerTask('default',['watch']);
}
现在我已经尝试了几种不同的解决方案，但我还远未了解我应该如何构建我的 gruntfile.js，以便它在布局文件夹中将我的两个页面模板 scss 作为自动前缀的 css 输出。
最佳答案
设法找到了一个可行的解决方案，可能不是最优雅的解决方案，但它确实有效，有点......
我的文件结构如下:
.gitignore
404.php
archive.php
comments.php
/compiled
style-human.css //-- Readable CSS Before prefixing --//
style.css //-- Minified CSS Before Prefixing --//
/page-layouts
frontage.human.css //-- Readable page-template CSS before prefixing --//
frontage.css //-- minified page-template CSS before prefixing --//
/fonts
footer.php
functions.php
gruntfile.js
header.php
/inc
index.php
/js
/languages
/node_modules
package.json
/page-layouts
frontage.css //-- prefixed minified CSS to be Enqueued after main style.css in functions.php --//
frontage-human.css //-- prefixed readable CSS --//
/page-templates
frontage.php //-- code for template goes here, Enqueued in functions.php --//
page.php
rtl.css
/sass
_normalize.scss
/elements
/forms
/layout
_footer
_header
/page-layouts //-- working folder for all page templates --//
_frontpage.scss //-- SASS for page template goes here! --//
/media
/mixins
/modules
/navigation
/page-templates
frontpage.scss //-- @imports content of ../layout/page-layouts/_frontpage.scss --//
/site
style.css //-- @imports everything SCSS except /page-layouts --//
/variables-site
search.php
sidebar.php
single.php
style-human.css //-- readable main stylesheet --//
style.css //-- minified main stylesheet Enqueued in functions.php --//
/template-parts
我的 Gruntfile.js 结构如下
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/**
* sass task
*/
sass: { // Task
dev: { // Target
options: { // Target options
style: 'expanded',
sourcemap: 'none',
},
files: { // Dictionary of files
'compiled/style-human.css': 'sass/style.scss', // 'destination': 'source'
'compiled/page-layouts/frontpage-human.css': 'sass/page-templates/frontpage.scss' // 'destination': 'source'
}
},
dist: { // Target
options: { // Target options
style: 'compressed',
sourcemap: 'none',
},
files: { // Dictionary of files
'compiled/style.css': 'sass/style.scss', // 'destination': 'source'
'compiled/page-layouts/frontpage.css': 'sass/page-templates/frontpage.scss' // 'destination': 'source'
}
}
}, // close sass task
/**
* Autoprefixer
*/
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
// prefix all files //
multiple_files: {
expand: true,
flatten: true,
src: 'compiled/*.css',
dest: ''
},
// prefix frontpage template //
multiple_files: {
expand: true,
flatten: true,
src: 'compiled/page-layouts/*.css',
dest: './page-layouts'
},
},
/**
* Watch task
*/
watch: {
css: {
files: '**/*scss',
tasks: ['sass','autoprefixer']
}
}
});
grunt.loadNpmTasks ('grunt-contrib-sass');
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-autoprefixer');
grunt.registerTask('default',['watch']);
}
基本上这是按照我的预期工作的，页面模板样式表在预期的页面布局文件夹中保存为人类可读/缩小的自动前缀版本，这样我就可以在 functions.php 中的主要 style.css 之后将它们排入队列
只有一个“小”问题需要解决，我的页面模板 scss 文件不理解变量...
关于javascript - SASS - 为页面模板输出单独的样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36990455/