Gruntjs 使用grunt sass自定义引导路径

我已经安装了引导式sass和grunt sass，并希望自定义构建中包含的引导式组件

我已在我的

app/styles/

文件夹中创建了

\u bootstrap.scss

的副本，需要覆盖默认导入路径-我需要对Gruntfile进行哪些更改才能正常工作

我已经尝试在我的_Bootstrap.scss文件中包含引导程序部分的完整路径，但无法编译。Gruntile摘录如下

Gruntfile

// Compiles Sass to CSS and generates necessary files if requested
sass: {
    options: {
        sourceMap: true,
        sourceMapEmbed: true,
        sourceMapContents: true,
        includePaths: ['.']
    },
    dist: {
        files: [{
            expand: true,
            cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      },
      server: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      }
    },

// Bootstrap
@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

// Custom styles
@import 'partials/main';

//将Sass编译为CSS，并在需要时生成必要的文件
sass：{
选项：{
sourceMap:true，
sourceMapEmbed:true，
sourceMapContents:true，
IncludePath:['。]
},
地区：{
档案：[{
是的，
cwd:“/styles”，
src:['*.{scss，sass}']，
目标：'.tmp/styles'，
分机：'.css'
}]
},
服务器：{
档案：[{
是的，
cwd:“/styles”，
src:['*.{scss，sass}']，
目标：'.tmp/styles'，
分机：'.css'
}]
}
},

以下是我使用引导以及与引导一起进行自定义安装所做的工作，其中包括/不包括可能对您有所帮助的引导组件

一旦我设置了Grunt和Bower，我就使用

Bower安装boostrap sass——save dev

添加了它，以便更新我的Bower.json文件

修改引导程序

我将

bower\u组件/bootstrap sass/assets/stylesheets/\u bootstrap.scss

导入到我的

styles.scss

文件中

然后编辑了

\u bootstrap.scss

注释出我不想要或不需要的组件

接下来，创建一个名为

\u main.scss

的文件，并将其存储在我的

style.scss

文件所在的子目录（部分）中，然后导入

\u main.scss

下的

\u bootstrap.scss

这样，如果需要，我可以通过编辑

\u main.scss

用自己的自定义样式覆盖引导

下面是我使用的一个示例，它可能有助于解释文件结构

Styles.scss文件

// Compiles Sass to CSS and generates necessary files if requested
sass: {
    options: {
        sourceMap: true,
        sourceMapEmbed: true,
        sourceMapContents: true,
        includePaths: ['.']
    },
    dist: {
        files: [{
            expand: true,
            cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      },
      server: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      }
    },

// Bootstrap
@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

// Custom styles
@import 'partials/main';

grunfile.js

module.exports = function(grunt){

    // Configure task(s)
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // setup uglify task
        uglify: {
            build: {
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.min.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'src/js/*.js']
                },
            },
            dev: {
                options: {
                    beautify: true,
                    mangle: false,
                    compress: false,
                    preserveComments: 'all'
                },
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js', 'src/js/*.js']
                },
            },
        },

        // setup watch task
        watch: {
            js: {
                files: ['bower_components/**/*.js', 'src/js/*.js'],
                tasks: ['uglify:dev']
            },
            css: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass:dev']
            },
        },

        // setup sass
        sass: {
            dev: {
                options: {
                     outputStyle: 'expanded'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
            build: {
                options: {
                    outputStyle: 'compressed'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
        },
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

    // Register task(s)
    grunt.registerTask('default', ['uglify:dev','sass:dev']);
    grunt.registerTask('build', ['uglify:build', 'sass:build']);
};

从那里，您应该能够添加自己的自定义引导样式和/或从引导中删除不需要的组件。然后只需运行

grunt

或

grunt build

，这取决于您是否需要开发输出（非精简）。或在编辑即时编译时进行grunt watch。添加chrome扩展名和应用程序，您将拥有所有文件的实时更新

晚了几个月。。但希望这有帮助

以下是我在使用引导时所做的工作，包括/不包括可能对您有所帮助的引导组件

一旦我设置了Grunt和Bower，我就使用

Bower安装boostrap sass——save dev

添加了它，以便更新我的Bower.json文件

修改引导程序

我将

bower\u组件/bootstrap sass/assets/stylesheets/\u bootstrap.scss

导入到我的

styles.scss

文件中

然后编辑了

\u bootstrap.scss

注释出我不想要或不需要的组件

接下来，创建一个名为

\u main.scss

的文件，并将其存储在我的

style.scss

文件所在的子目录（部分）中，然后导入

\u main.scss

下的

\u bootstrap.scss

这样，如果需要，我可以通过编辑

\u main.scss

用自己的自定义样式覆盖引导

下面是我使用的一个示例，它可能有助于解释文件结构

Styles.scss文件

// Compiles Sass to CSS and generates necessary files if requested
sass: {
    options: {
        sourceMap: true,
        sourceMapEmbed: true,
        sourceMapContents: true,
        includePaths: ['.']
    },
    dist: {
        files: [{
            expand: true,
            cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      },
      server: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      }
    },

// Bootstrap
@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

// Custom styles
@import 'partials/main';

grunfile.js

module.exports = function(grunt){

    // Configure task(s)
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // setup uglify task
        uglify: {
            build: {
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.min.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'src/js/*.js']
                },
            },
            dev: {
                options: {
                    beautify: true,
                    mangle: false,
                    compress: false,
                    preserveComments: 'all'
                },
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js', 'src/js/*.js']
                },
            },
        },

        // setup watch task
        watch: {
            js: {
                files: ['bower_components/**/*.js', 'src/js/*.js'],
                tasks: ['uglify:dev']
            },
            css: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass:dev']
            },
        },

        // setup sass
        sass: {
            dev: {
                options: {
                     outputStyle: 'expanded'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
            build: {
                options: {
                    outputStyle: 'compressed'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
        },
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

    // Register task(s)
    grunt.registerTask('default', ['uglify:dev','sass:dev']);
    grunt.registerTask('build', ['uglify:build', 'sass:build']);
};

从那里，您应该能够添加自己的自定义引导样式和/或从引导中删除不需要的组件。然后只需运行

grunt

或

grunt build

，这取决于您是否需要开发输出（非精简）。或在编辑即时编译时进行grunt watch。添加chrome扩展名和应用程序，您将拥有所有文件的实时更新

---

晚了几个月。。但希望这有帮助

不太清楚你想要实现什么。你能把它分解成更小的部分吗？我已经安装了引导sass，但只想包括特定的组件。我不想修改包源代码，我想在我的项目中使用我自己版本的_bootstrap.scss-我可以设置加载路径吗？不太清楚您想要实现什么。你能把它分解成更小的部分吗？我已经安装了引导sass，但只想包括特定的组件。我不想修改包源代码，我想在我的项目中使用我自己版本的_bootstrap.scss-我可以设置加载路径吗？