无法使用gulp-sass加载从sass(.scss)编译的离子css文件

时间:2014-11-18 18:25:06

标签: ionic-framework gulp-sass gulp-sourcemaps

我试图将应用程序从Grunt构建移动到Gulp。我的Gulp构建生成一个ionic.css文件,我尝试在index.html中加载一个链接标记。我的chrome检查器中出现错误,即在我的www文件夹中可以看到该文件在该路径中找不到该文件。

我的代码

gulp-sass任务

gulp.task('styles', ['clean-styles'], function () {
  gulp.src( './app/lib/scss/ionic/ionic.scss' ) //get the sass files
    .pipe(sourcemaps.init())                    //load internal sourcemap
      .pipe(sass())                             //convert sass to css
    .pipe(sourcemaps.write())                   //write inline sourcemap
    .pipe(gulp.dest( './www/lib/css/' ));       //push the css to www/lib/css 
});

index.html头

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/css/ionic.css" rel="stylesheet">
  </head>

我的目录结构

my_app
    -app
        -lib
            -fonts
            -js
            -scss
        -src
            -images
            -scss
            -page_view1
                -templates
                page_view1_controller.js
            -page_view2 
                -templates
                page_view2_controller.js
-hooks
-node_modules
-platforms
-plugins
-www
    -img
    -js
    -lib
        -css
            ionic.css
        -fonts
            -ionic
                ionicons.eot
                ionicons.svg
                ionicons.ttf
                ionicons.woff
        -js
            -angular
            -angular-animate
            -angular-bootstrap
            -angular-sanitize
            -angular-ui-router
            -collide
            -ionic
                ionic-angular.js
                ionic.bundle.js
                ionic.js
            -ngCordova
   cordova.js
   cordova_plugins.js
   device.js
   keyboard.js
   index.html
gulpfile.js
ionic.project
package.json

1 个答案:

答案 0 :(得分:1)

gulp minify install gulp uglify

存在问题