Twitter bootstrap 使用SASS编辑引导变量

我使用VisualStudio2017开发了一个ASPNetCore2 Web应用程序。我试图覆盖Bootstrap4Beta中的一些样式

• 我一直在从鲍尔导入引导程序
• 我已经为Grunt任务创建了

  grunfile.js

• 我已经为Gulp创建了

  gulpfile.js

• 我还在我的

  wwwroot\scss

  文件夹中为WebCompiler（模拟）创建了

  compilerconfig.json

  文件，我有：

• site.scss，它导入_custom（在某些自定义样式上使用变量）

• \u custom.scss

  文件，其中我复制了

  \u variables.scss

  内容和编辑变量。 我有以下错误：

  “没有命名的mixin-断言升序\n\n备份跟踪：\n\t\u custom.scss:334”

• 为了解决这个错误，我在文件的顶部添加了一些行；然后，我用咕噜和咕噜编译

  @import "../lib/bootstrap/scss/_functions.scss";
  @import "../lib/bootstrap/scss/_variables.scss";
  @import "../lib/bootstrap/scss/bootstrap.scss";
  

在本例中，我的完整引导SCS+我的SCS被正确地生成为一个css文件（带有grunt和gulp）。但是变量是引导变量，不是我的

• 我尝试导入所有引导scss文件，并使用grunt和gulp进行编译。在这种情况下，我有一个错误：

  “未定义变量：\”$alert-padding-y\”。

  但是

  在第874行定义了$alert-padding-y

  。。。在我的

  \u custom.scss

  文件中

Grunfile.js：

    /// <binding />
    module.exports = function (grunt) {
        'use strict';

        grunt.loadNpmTasks('grunt-sass');
        grunt.loadNpmTasks('grunt-autoprefixer');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-sass');

        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

            // Sass
            sass: {
                options: {
                    sourceMap: true, // Create source map
                    outputStyle: 'compressed' // Minify output
                },
                dist: {
                    files: [
                      {
                          expand: true, // Recursive
                          cwd: "scss", // The startup directory
                          src: ["wwwroot/scss/site.scss"], // Source files//'wwwroot/lib/bootstrap/**/*.scss'
                          dest: "wwwroot/css/", // Destination
                          ext: ".css" // File extension 
                      }
                    ]
                }//, //files: {'wwwroot/lib/bootstrap/**/*.scss':'wwwroot/css/bootstrap.css'}
            },

            // Autoprefixer
            autoprefixer: {
                options: {
                    //browsers: ['last 2 versions'],
                    map: true // Update source map (creates one if it can't find an existing map)
                },

                // Prefix all files
                multiple_files: {
                    src: 'wwwroot/css/*.css'
                },
            },

            // Watch
            watch: {
                css: {
                    files: ['wwwroot/scss/site.scss'],//'wwwroot/lib/bootstrap/**/*.scss',//'wwwroot/lib/bootstrap/**/*.scss',
                    tasks: ['sass', 'autoprefixer'],
                    options: {
                        spawn: false
                    }
                }
            }
        });

        grunt.registerTask('dev', ['watch']);
        grunt.registerTask('prod', ['sass', 'autoprefixer']);
    };
    /*
    This file in the main entry point for defining grunt tasks and using grunt plugins.
    Click here to learn more. https://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409

    module.exports = function (grunt) {
        grunt.initConfig({
        });
    };
    */

我不想用另一个简单的css文件覆盖css。我想用我的变量重建引导，将“true”设置为“$enable gradients”变量，将我的颜色设置为主变量和次变量，等等

---

目前，我找到的唯一解决方案是修改文件“_variables.scss”

我在尝试用gulp构建引导时也遇到了同样的错误。你解决了吗？@wilsmex我找到的唯一解决办法是。。。覆盖原始文件“./lib/bootstrap/scss/_variables.scss”..：：它可以工作，但如果我需要升级。。。你猜我的意思；）我在尝试用gulp构建引导时也遇到了同样的错误。你解决了吗？@wilsmex我找到的唯一解决办法是。。。覆盖原始文件“./lib/bootstrap/scss/_variables.scss”..：：它可以工作，但如果我需要升级。。。你猜我的意思；）

    /// <binding />
    module.exports = function (grunt) {
        'use strict';

        grunt.loadNpmTasks('grunt-sass');
        grunt.loadNpmTasks('grunt-autoprefixer');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-sass');

        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

            // Sass
            sass: {
                options: {
                    sourceMap: true, // Create source map
                    outputStyle: 'compressed' // Minify output
                },
                dist: {
                    files: [
                      {
                          expand: true, // Recursive
                          cwd: "scss", // The startup directory
                          src: ["wwwroot/scss/site.scss"], // Source files//'wwwroot/lib/bootstrap/**/*.scss'
                          dest: "wwwroot/css/", // Destination
                          ext: ".css" // File extension 
                      }
                    ]
                }//, //files: {'wwwroot/lib/bootstrap/**/*.scss':'wwwroot/css/bootstrap.css'}
            },

            // Autoprefixer
            autoprefixer: {
                options: {
                    //browsers: ['last 2 versions'],
                    map: true // Update source map (creates one if it can't find an existing map)
                },

                // Prefix all files
                multiple_files: {
                    src: 'wwwroot/css/*.css'
                },
            },

            // Watch
            watch: {
                css: {
                    files: ['wwwroot/scss/site.scss'],//'wwwroot/lib/bootstrap/**/*.scss',//'wwwroot/lib/bootstrap/**/*.scss',
                    tasks: ['sass', 'autoprefixer'],
                    options: {
                        spawn: false
                    }
                }
            }
        });

        grunt.registerTask('dev', ['watch']);
        grunt.registerTask('prod', ['sass', 'autoprefixer']);
    };
    /*
    This file in the main entry point for defining grunt tasks and using grunt plugins.
    Click here to learn more. https://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409

    module.exports = function (grunt) {
        grunt.initConfig({
        });
    };
    */

var gulp = require('gulp'), 
    fs = require("fs"),
    less = require("gulp-less"),
    sass = require("gulp-sass");


gulp.task('default', function () {
    // place code for your default task here
});

gulp.task("sass", function () {
    return gulp.src('wwwroot/scss/site.scss')
        .pipe(sass())
        .pipe(gulp.dest('wwwroot/css'));
});