Sass 用基金会代替SoS的Bootstrap在自耕农应用中的应用

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

安装基础后用<代码> Buver安装基础——保存< /代码>

Grunt将在我的

index.html

文件中添加以下行

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

和sass一起工作

下面是

bower.json

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

这是wiredep任务和compass任务

// 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'
  },

//自动将Bower组件注入应用程序
wiredep：{
选项：{
cwd:'
},
应用程序：{
src:['/index.html']，
忽略路径：/\//
},
sass：{
src:['/styles/{，*/}*{scss，sass}']，
ignorePath:/（\.\.\/）{1,2}bower\u组件\//
}
},
//将Sass编译为CSS，并在需要时生成必要的文件
指南针：{
选项：{
sassDir:“/styles”，
cssDir:“.tmp/styles”，
generatedImagesDir:'.tmp/images/generated'，
imagesDir:“/images”，
javascriptsDir:“/scripts”，
fontsDir:“/styles/fonts”，
进口路径：'./鲍尔_组件'，
httpImagesPath:“/images”，
httpGeneratedImagesPath:“/images/generated”，
httpFontsPath:“/styles/fonts”，
相对论：错，
AssetCachBuster:错，
raw:'Sass:：Script:：Number.precision=10\n'
},

---

我不能100%确定这是否是相关部分，因此我附上了我的完整信息。

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

首先，您想从GruntFiel.js的WiRedep部分中排除基础.css。通过添加<代码>排除：[ [基础·CSS ] ]，< /代码>到WiRedep部分：（这将删除对Index的调用。

最后，在App/Type中，为基础添加普通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使用libsas的步骤，但我删除了它们，因为这超出了这个问题的范围。

Compass没有在

bower\u components/foundation/saas/

foundation中处理foundation的saas文件（我使用的是5.3.3版）似乎无法与新的Compass 1.0.1和Ruby Sass 3.4配合使用。请删除Sass和Compass（

gem uninstall Sass；gem uninstall Compass

），然后安装旧版本的Compass（

gem install Compass--0.12.7版

）它将使用SASS的正确版本。现在它起作用了！谢谢这一点-对我来说工作非常出色。我必须确保我在Bour.JSON中使用5.5.3基础（不是默认的Bover基金会4.0.0）。。我暂时还排除了“包括”设置，但在其他方面效果很好。@naneer，您是否有指向libsass步骤的链接，或者您是否可以共享这些步骤，因为这正是我们想要做的。到目前为止，我们一直在遵循以下列出的步骤，尽管有些部分需要调整：

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

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

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