在 yeoman 创建的应用程序中使用 Foundation 而不是 Bootstrap 和 SASS

Question

我已经用 yeoman 创建了一个 AngularJS 应用程序。现在我想把前端框架从bootstrap切换到foundation。

在我用bower install foundation --save安装基础之后

Grunt 将以下行添加到我的 index.html 文件中。

<link rel="stylesheet" href="bower_components/foundation/css/foundation.css" />

如何强制 grunt 使用 sass 方式。

对于 sass 方式，index.html 未受影响（js 文件除外），但 main.scss 文件包含以下行或类似内容

@import "../bower_components/foundation/scss/foundation" 

使用 sass。

这是bower.json 的 Grundfile.js 触发器

watch: {
  bower: {
    files: ['bower.json'],
    tasks: ['wiredep']
  },
}

这里是wiredep任务和指南针任务

// Automatically inject Bower components into the app
wiredep: {
  options: {
    cwd: '<%= yeoman.app %>'
  },
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /..\//
  },
  sass: {
    src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    ignorePath: /(\.\.\/){1,2}bower_components\//
  }
},

// Compiles Sass to CSS and generates necessary files if requested
compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    generatedImagesDir: '.tmp/images/generated',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: './bower_components',
    httpImagesPath: '/images',
    httpGeneratedImagesPath: '/images/generated',
    httpFontsPath: '/styles/fonts',
    relativeAssets: false,
    assetCacheBuster: false,
    raw: 'Sass::Script::Number.precision = 10\n'
  },

我不能 100% 确定这是否是相关部分，所以我附上了完整的 Grundfile.js。

Answer 1

这就是我所做的，可能还有更多内容，希望其他人可以发现，但到目前为止它按预期工作。希望这会有所帮助：

首先，您要从 gruntfile.js 的wiredep 部分中排除foundation.css。通过将exclude: ['foundation.css'], 添加到wiredep 部分来做到这一点：（这将删除对index.html 头部的foundation.css 的调用”

// Automatically inject Bower components into the app
wiredep: {
 ...//
 app: {
   src: ['<%= yeoman.app %>/index.html'],
   exclude: ['foundation.css'],
   ignorePath:  /..\//
 },
 ...//
},

然后，在 gruntfile.js 的 compass 部分，更改 importPath 以访问位于 bower_components/foundation/scss 中的 scss 文件：

compass: {
   options: {
   ...//
     importPath: './bower_components/foundation/scss',
   //...
   }
}

最后，在 app/styles 中，添加基础的通用 scss 文件。

按照 Yeoman Angular 的命名约定，main.scss 可能如下所示：

@import 
    "normalize",  // import from bower_components/foundation
    "settings",   // your custom _settings.scss file in app/styles directory
    "foundation"; // import from bower_components/foundation

请原谅任何不清楚或遗漏的步骤，因为我写得很快。 我也有使用 grunt-sass 使用 libsass 的步骤，但我删除了它们，因为它超出了这个问题的范围。