Question

我用VisualStudio2017开发了一个ASPNetCore2 Web应用程序。我尝试覆盖Bootstrap 4 beta中的一些样式。

我一直在从凉亭进口Bootstrap。
我为Grunt任务创建了gruntfile.js
我为Gulp

gulpfile.js

我还为WebCompiler创建compilerconfig.json文件（模仿）在我的wwwroot\scss文件夹中，我已经

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

@import "_custom.scss";
// my variables, some has the same name that bootstrap variables, to override it
$body-bg: $gray-100;
//...
$orange-900: darken($orange, 90%);

html {
        body {
        //
        }
}

_custom.scss文件，其中我已复制_variables.scss内容和编辑变量。我发现了这个错误："no mixin named -assert-ascending\n\nBacktrace:\n\t_custom.scss:334"

为了解决这个错误，我在文件顶部添加了一些行;然后，我用grunt和gulp编译。

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

在这种情况下，我的完整bootstrap scss + my scss正确生成到一个css文件（带有grunt和gulp）。但是变量是引导变量，而不是我的变量。

我尝试导入所有bootstrap scss文件并使用grunt和gulp进行编译。在这种情况下，我发现此错误："Undefined variable: \"$alert-padding-y\".".但$alert-padding-y在我的_custom.scss文件中的第874行定义。

Gruntfile.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({
        });
    };
    */

Gulpfile.js

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'));
});

我不希望用另一个简单的css文件覆盖css。我想用我的变量重建bootstrap，设置＆＃34; true＆＃34; to＆＃34; $ enable-gradient＆＃34;变量，将我的颜色设置为主要和次要变量等。

目前，我找到的唯一解决方案是修改文件＆＃34; _variables.scss＆＃34; ...

使用SASS编辑Bootstrap变量

0 个答案: