Question

我尝试使用纯nodejs和grunt编译boostrap-sass。因此，没有红宝石，红宝石在铁轨或宝石上。

我的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.

正如我们所看到的，它只是在引导程序时停止工作。任何帮助都会很棒。

Answer 1

Sass编译器不会编译任何以_开头的文件，方法是让_告诉它忽略它。

您可以在http://sass-lang.com/guide下的partials部分中引用它。

grunt-sass不编译bootstrap-sass

1 个答案: