grunt-sass 不编译 bootstrap-sass
grunt-sass does not compile bootstrap-sass
我尝试使用纯 nodejs 和 grunt 编译 boostrap-sass。所以,在 rails 或 gem 上没有 ruby、ruby。
我的package.json:
{
"name": "myProject",
"version": "1.0.0",
"dependencies": {
"grunt": "^1.0.1",
"grunt-bootlint": "^0.10.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-compress": "^1.3.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-uglify": "^2.0.0",
"grunt-sass-lint": "^0.2.0",
"grunt-contrib-jshint": "^1.0.0"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"grunt-sass": "^1.2.1",
"node-sass": "^3.10.1",
"typescript": "^2.0.6",
"typings": "^1.5.0"
}
}
我的Gruntfile.js:
module.exports = function (grunt)
{
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-sass-lint");
grunt.loadNpmTasks("grunt-bootlint");
grunt.loadNpmTasks("grunt-contrib-jshint");
var relaxerrors = [
"App/Mvc/views/notallowed.phtml",
"App/Mvc/views/ajax/*.phtml",
"App/Mvc/views/backend/*.phtml"
];
grunt.initConfig({
sass: {
options: {
includePaths: ["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"],
precision: 10,
sourcemap: "inline",
trace: true,
unixNewlines: true
},
dist: {
files: {
"web/assets/styles/frontend.min.css": "assets/styles/index.scss",
"web/assets/styles/backend.min.css": "assets/styles/dashboard.scss",
"web/assets/styles/bootstrap.min.css": "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
}
}
},
sasslint: {
target: [ "assets/styles/*.scss" ]
},
jshint: {
files: [ "assets/js/*.js" ],
options: {
globals: {
jquery: true
}
}
},
bootlint: {
options: {
stoponerror: true,
showallerrors: true,
stoponwarning: false,
relaxerror: {
"E001": relaxerrors,
"W001": relaxerrors,
"W002": relaxerrors,
"W003": relaxerrors,
"W005": relaxerrors
}
},
files: [ "App/Mvc/views/*.phtml", "App/Mvc/views/*.html" ]
}
}
);
grunt.registerTask("validate:styles", [ "sasslint" ]);
grunt.registerTask("validate:js", [ "jshint" ]);
grunt.registerTask("validate:bootstrap", [ "bootlint" ]);
grunt.registerTask("validate:all", [ "validate:bootstrap", "validate:styles", "validate:js" ]);
grunt.registerTask("build:styles", [ "validate:styles", "sass" ]);
};
我用以下方式调用它:
grunt build:styles --force --verbose
显示以下输出:
Running "sass" task
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: assets/styles/index.scss -> web/assets/styles/frontend.min.css
Files: assets/styles/dashboard.scss -> web/assets/styles/backend.min.css
Files: node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss -> web/assets/styles/bootstrap.min.css
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Writing web/assets/styles/backend.min.css...OK
Writing web/assets/styles/frontend.min.css...OK
Done.
正如我们所见,它在 bootstrap 时停止工作。任何帮助都会很棒。
Sass 编译器不会编译任何以 _
开头的文件,因为 _
告诉它忽略它。
您可以在 http://sass-lang.com/guide 部分部分下参考它。
我尝试使用纯 nodejs 和 grunt 编译 boostrap-sass。所以,在 rails 或 gem 上没有 ruby、ruby。
我的package.json:
{
"name": "myProject",
"version": "1.0.0",
"dependencies": {
"grunt": "^1.0.1",
"grunt-bootlint": "^0.10.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-compress": "^1.3.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-uglify": "^2.0.0",
"grunt-sass-lint": "^0.2.0",
"grunt-contrib-jshint": "^1.0.0"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"grunt-sass": "^1.2.1",
"node-sass": "^3.10.1",
"typescript": "^2.0.6",
"typings": "^1.5.0"
}
}
我的Gruntfile.js:
module.exports = function (grunt)
{
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-sass-lint");
grunt.loadNpmTasks("grunt-bootlint");
grunt.loadNpmTasks("grunt-contrib-jshint");
var relaxerrors = [
"App/Mvc/views/notallowed.phtml",
"App/Mvc/views/ajax/*.phtml",
"App/Mvc/views/backend/*.phtml"
];
grunt.initConfig({
sass: {
options: {
includePaths: ["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"],
precision: 10,
sourcemap: "inline",
trace: true,
unixNewlines: true
},
dist: {
files: {
"web/assets/styles/frontend.min.css": "assets/styles/index.scss",
"web/assets/styles/backend.min.css": "assets/styles/dashboard.scss",
"web/assets/styles/bootstrap.min.css": "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
}
}
},
sasslint: {
target: [ "assets/styles/*.scss" ]
},
jshint: {
files: [ "assets/js/*.js" ],
options: {
globals: {
jquery: true
}
}
},
bootlint: {
options: {
stoponerror: true,
showallerrors: true,
stoponwarning: false,
relaxerror: {
"E001": relaxerrors,
"W001": relaxerrors,
"W002": relaxerrors,
"W003": relaxerrors,
"W005": relaxerrors
}
},
files: [ "App/Mvc/views/*.phtml", "App/Mvc/views/*.html" ]
}
}
);
grunt.registerTask("validate:styles", [ "sasslint" ]);
grunt.registerTask("validate:js", [ "jshint" ]);
grunt.registerTask("validate:bootstrap", [ "bootlint" ]);
grunt.registerTask("validate:all", [ "validate:bootstrap", "validate:styles", "validate:js" ]);
grunt.registerTask("build:styles", [ "validate:styles", "sass" ]);
};
我用以下方式调用它:
grunt build:styles --force --verbose
显示以下输出:
Running "sass" task
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: assets/styles/index.scss -> web/assets/styles/frontend.min.css
Files: assets/styles/dashboard.scss -> web/assets/styles/backend.min.css
Files: node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss -> web/assets/styles/bootstrap.min.css
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Options: precision=10, includePaths=["node_modules/bootstrap-sass/assets/stylesheets/bootstrap"], sourcemap="inline", trace, unixNewlines
Writing web/assets/styles/backend.min.css...OK
Writing web/assets/styles/frontend.min.css...OK
Done.
正如我们所见,它在 bootstrap 时停止工作。任何帮助都会很棒。
Sass 编译器不会编译任何以 _
开头的文件,因为 _
告诉它忽略它。
您可以在 http://sass-lang.com/guide 部分部分下参考它。