无法使用grunt编译引导css
网上有很多关于这方面的教程,但是经过两天的努力,我必须得到一些帮助。 我正在尝试向引导添加一个名称空间,这样我就可以在Salesforce中使用它,而不会干扰Salesforce的样式表。 我的目标是用.bs{}包装bootstrap.less,这样我就可以在我的页面中将它作为资源引用。 看起来不管怎样,bootstrap.css都没有编译无法使用grunt编译引导css,css,twitter-bootstrap,gruntjs,less,Css,Twitter Bootstrap,Gruntjs,Less,网上有很多关于这方面的教程,但是经过两天的努力,我必须得到一些帮助。 我正在尝试向引导添加一个名称空间,这样我就可以在Salesforce中使用它,而不会干扰Salesforce的样式表。 我的目标是用.bs{}包装bootstrap.less,这样我就可以在我的页面中将它作为资源引用。 看起来不管怎样,bootstrap.css都没有编译 Bootstrap Test v2 ├───bootstrap-3.3.7 ├───Gruntfile.js |───dist |
Bootstrap Test v2
├───bootstrap-3.3.7
├───Gruntfile.js
|───dist
| |───css
| |───bootstrap.css
|───less
|───bootstrap.less
复制步骤:
1) 修改bootstrap.less(用.bs{}包装内容)
2) 导航到引导测试V2
3) 运行命令“grunt dist”
输出:
C:\Users\json\Desktop\Bootstrap\Bootstrap Test v2>grunt dist
(node:8444) ExperimentalWarning: The http2 module is an experimental API.
Running "clean:dist" (clean) task
>> 1 path cleaned.
Running "less:compileCore" (less) task
>> 1 stylesheet created.
>> 1 sourcemap created.
Running "less:compileTheme" (less) task
>> 1 stylesheet created.
>> 1 sourcemap created.
Running "autoprefixer:core" (autoprefixer) task
>> 1 autoprefixed stylesheet created.
>> 1 sourcemap created.
Running "autoprefixer:theme" (autoprefixer) task
>> 1 autoprefixed stylesheet created.
>> 1 sourcemap created.
Running "csscomb:dist" (csscomb) task
>> Using custom config file "less/.csscomb.json"...
>> Sorting file "dist/css/bootstrap-theme.css"...
>> Sorting file "dist/css/bootstrap.css"...
Running "cssmin:minifyCore" (cssmin) task
>> 1 sourcemap created.
>> 1 file created. 146.01 kB → 121.2 kB
Running "cssmin:minifyTheme" (cssmin) task
>> 1 sourcemap created.
>> 1 file created. 26.13 kB → 23.41 kB
Running "copy:fonts" (copy) task
Created 1 directory, copied 5 files
Running "concat:bootstrap" (concat) task
Running "uglify:core" (uglify) task
File dist/js/bootstrap.min.js created: 69.71 kB → 37.05 kB
>> 1 file created.
Running "commonjs" task
File dist/js/npm.js created.
Done.
Execution Time (2018-05-23 23:58:31 UTC+3)
clean:dist 77ms █ 2%
less:compileCore 994ms ███████████ 25%
less:compileTheme 146ms ██ 4%
autoprefixer:core 538ms ██████ 14%
autoprefixer:theme 90ms █ 2%
csscomb:dist 1.1s ████████████ 28%
cssmin:minifyCore 421ms █████ 11%
cssmin:minifyTheme 53ms █ 1%
copy:fonts 48ms █ 1%
uglify:core 427ms █████ 11%
Total 3.9s
Grunfile:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"dist/css/bootstraptest.css": "less/bootstrap.less" // destination file and source file
}
}
},
watch: {
styles: {
files: ['less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.registerTask('default', ['less', 'watch']);
};
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
paths: ["assets/css"]
},
files: {"dist/css/bootstrap.css": "less/bootstrap.less"}
},
production: {
options: {
paths: ["assets/css"],
cleancss: true
},
files: {"dist/css/bootstrap.css": "less/bootstrap.less"}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less']);
};
注:
1) 使用“grunt”命令对我不起作用,它会抛出一个错误“运行“jekyll:docs”(jekyll)任务”,并建议下载我已经安装的jekyll。我在网上读到,“grunt dist”应该足够了,对吗?使用“node js命令行”而不是常规命令行为我做到了这一点 Windoes:Start>Node.js命令提示符
我按照文章中的步骤进行了操作,最终成功了。您所尝试的是不可能的。无法将命名空间添加到引导。