在yeoman创建的应用程序中使用Foundation而不是Bootstrap with SASS [英] Use Foundation instead of Bootstrap with SASS in a yeoman created application

问题描述

我与yeoman创建了一个AngularJS应用程序。现在我想将前端框架从引导切换到基础。

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

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

 < link rel =stylesheethref =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触发器

 观看：{
 bower：{
 files：['bower .json']，
 tasks：['wiredep'] 
}，
} 
  

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

  // //将Bower组件自动注入应用程序
 wiredep：{
选项：{
 cwd：'<％= yeoman.app％>'
}，
 app：{
 src： ['<％= yeoman.app％> /index.html']，
 ignorePath：/..\// 
}，
 sass：{
 src ：['<％= yeo man.app％> / styles / {，* /} *。{scss，sass}']，
 ignorePath：/(\.\.\/){1,2}bower_components\ // 
} 
}，
 
 //将Sass编译为CSS，并根据请求生成必需的文件
罗盘：{
 options：{
 sassDir：'<％= yeoman.app％> / styles'，
 cssDir：'.tmp / styles'，
 generatedImagesDir：'.tmp / images / generated'，
 imagesDir：'<％= yeoman.app％> / images'，
 javascriptsDir：'<％= yeoman.app％> / scripts'，
 fontsDir：'<％= yeoman '/ images / generated'，$ b $ httpGeneratedImagesPath：'/ images / generated'，
 httpFontsPath：'/ styles / fonts'，
 relativeAssets：false，
 assetCacheBuster：false，
 raw：'Sass :: Script :: Number.precision = 10 \''
 $，
  

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

这就是我所做的，可能还有更多，希望别人能够找到答案，但目前为止按预期工作。希望这有助于：

首先，您想从gruntfile.js的wiredep部分中排除foundation.css。通过在wiredep部分添加 exclude：['foundation.css']，来完成此操作：（这将删除index.html头部中对foundation.css的调用 / b>

  //将Bower组件自动注入应用程序
 wiredep：{
 ... // 
 app：{'b $ b src：['<％= yeoman.app％> /index.html']，
 exclude：['foundation.css']，
 ignorePath： /..\// 
}，
 ... // 
}，
  

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

 指南针：{
选项：{
 ... // 
 importPath：'./bower_components/foundation/scss'，
 //。 .. 
 
 
  

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

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

  @import 
normalize，//从bower_components / foundation导入
settings，//您的自定义_settings.scss文件在app /样式目录
基础; //从bower_components / foundation进口
  

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

I've created an AngularJS application with yeoman. Now I want to switch the front-end framework from bootstrap to foundation.

After I installed foundation with bower install foundation --save

Grunt will add the following line to my index.html file.

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

How can I force grunt to use the sass way.

For the sass way the index.html is untouched (except js files) but the main.scss file nedds the following line or simliar

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

to work with the sass.

Here is the Grundfile.js trigger for bower.json

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

And here is the wiredep task and the compass task

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

I'm not 100% sure if this is the relevant part, so I attached my full Grundfile.js.

解决方案

This is what I've done, there might be more to it and hopefully someone else can find out, but it's working as expected so far. Hope this helps:

First you want to exclude foundation.css from the wiredep section of gruntfile.js. Do this by adding exclude: ['foundation.css'], to the wiredep section: (this will remove the call to foundation.css in head of index.html"

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

Then, in the compass section of gruntfile.js, change the importPath to access the scss files located in bower_components/foundation/scss:

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

Lastly, in app/styles, add the common scss files for foundation.

Following Yeoman Angular's naming convention, main.scss could look like this:

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

Pardon any unclear or missing steps as I wrote this rather quickly. I also have steps to use libsass using grunt-sass, but I removed them figuring that it's out of scope for this question.

这篇关于在yeoman创建的应用程序中使用Foundation而不是Bootstrap with SASS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！