NG6 Angular sass 文件错误

【问题标题】：NG6 Angular sass files errorNG6 Angular sass 文件错误
【发布时间】：2017-03-03 14:49:23
【问题描述】：

我最近开始使用 NG6 Angular 并且我有点喜欢它，但是当我尝试使用 sass 而不是它的默认样式时它让我卡住了，因为这是我在项目中使用的。我已经安装了包括 node-sass 和 sass-loader 在内的所有依赖项，你可以检查它here。以下是我使用 npm test

测试时的配置和错误

gulpfile.babel.js

let paths = {
  js: resolveToComponents('**/*!(.spec.js).js'), // exclude spec files
  styl: resolveToApp('**/*.scss'), // stylesheets
};

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    entry: {},
    module: {
        loaders: [
            { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.scss$/, loader: 'style!css!sass' },
            { test: /\.css$/, loader: 'style!css' }
        ]
    },
    plugins: [
        // Injects bundles in your index.html instead of wiring all manually.
        // It also adds hash to all injected assets so we don't have problems
        // with cache purging during deployment.
        new HtmlWebpackPlugin({
            template: 'client/index.html',
            inject: 'body',
            hash: true
        }),

        // Automatically move all modules defined outside of application directory to vendor bundle.
        // If you are using more complicated project structure, consider to specify common chunks manually.
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function(module, count) {
                return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
            }
        })
    ]
};

错误日志

START:
Hash: fcc86e1c1f5bc16638ec
Version: webpack 1.13.2
Time: 3870ms
         Asset     Size  Chunks             Chunk Names
spec.bundle.js  4.42 MB       0  [emitted]  spec.bundle.js
chunk    {0} spec.bundle.js (spec.bundle.js) 1.68 MB [rendered]
    [0] ./spec.bundle.js 1.5 kB {0} [built]
    [1] ./~/angular/index.js 48 bytes {0} [built]
    [2] ./~/angular/angular.js 1.19 MB {0} [built]
    [3] ./~/angular-mocks/angular-mocks.js 108 kB {0} [built]
    [4] ./client/app \.spec\.js 329 bytes {0} [built]
    [5] ./client/app/common/hero/hero.spec.js 1.77 kB {0} [optional] [built]
    [6] ./client/app/common/hero/hero.js 622 bytes {0} [built]
    [7] ./~/angular-ui-router/release/angular-ui-router.js 367 kB {0} [built]
    [8] ./client/app/common/hero/hero.component.js 523 bytes {0} [built] [1 error]
    [9] ./client/app/common/hero/hero.html 63 bytes {0} [built]
   [10] ./client/app/common/hero/hero.controller.js 481 bytes {0} [built]
   [11] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
   [13] ./client/app/common/navbar/navbar.spec.js 1.81 kB {0} [optional] [built]
   [14] ./client/app/common/navbar/navbar.js 640 bytes {0} [built]
   [15] ./client/app/common/navbar/navbar.component.js 549 bytes {0} [built] [1 error]
   [16] ./client/app/common/navbar/navbar.html 63 bytes {0} [built]
   [17] ./client/app/common/navbar/navbar.controller.js 491 bytes {0} [built]
   [19] ./client/app/common/user/user.spec.js 1.77 kB {0} [optional] [built]
   [20] ./client/app/common/user/user.js 622 bytes {0} [built]
   [21] ./client/app/common/user/user.component.js 523 bytes {0} [built] [1 error]
   [22] ./client/app/common/user/user.html 63 bytes {0} [built]
   [23] ./client/app/common/user/user.controller.js 481 bytes {0} [built]
   [25] ./client/app/components/about/about.spec.js 1.79 kB {0} [optional] [built]
   [26] ./client/app/components/about/about.js 766 bytes {0} [built]
   [27] ./client/app/components/about/about.component.js 536 bytes {0} [built] [1 error]
   [28] ./client/app/components/about/about.html 180 bytes {0} [built]
   [29] ./client/app/components/about/about.controller.js 486 bytes {0} [built]
   [31] ./client/app/components/home/home.spec.js 1.77 kB {0} [optional] [built]
   [32] ./client/app/components/home/home.js 808 bytes {0} [built]
   [33] ./client/app/components/home/home.component.js 523 bytes {0} [built] [1 error]
   [34] ./client/app/components/home/home.html 176 bytes {0} [built]
   [35] ./client/app/components/home/home.controller.js 481 bytes {0} [built]

ERROR in ./client/app/common/hero/hero.scss
Module parse failed: /development/sites/www/Angular/client/app/common/hero/hero.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./client/app/common/hero/hero.component.js 15:0-22

ERROR in ./client/app/common/navbar/navbar.scss
Module parse failed: /development/sites/www/Angular/client/app/common/navbar/navbar.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./client/app/common/navbar/navbar.component.js 15:0-24

ERROR in ./client/app/common/user/user.scss
Module parse failed: /development/sites/www/Angular/client/app/common/user/user.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./client/app/common/user/user.component.js 15:0-22

ERROR in ./client/app/components/about/about.scss
Module parse failed: /development/sites/www/Angular/client/app/components/about/about.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./client/app/components/about/about.component.js 15:0-23

ERROR in ./client/app/components/home/home.scss
Module parse failed: /development/sites/www/Angular/client/app/components/home/home.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./client/app/components/home/home.component.js 15:0-22
21 10 2016 17:56:58.794:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
21 10 2016 17:56:58.800:INFO [launcher]: Starting browser Chrome
21 10 2016 17:56:58.801:ERROR [launcher]: No binary for Chrome browser on your platform.
  Please, set "CHROME_BIN" env variable.

Finished in 0 secs / 0 secs

npm ERR! Test failed.  See above for more details.

【问题讨论】：

    标签： angularjs node.js npm gulp webpack


    【解决方案1】：

    原来我还需要替换 karma.conf.js

    中的这段代码

    { 测试: /\.styl$/, 加载器: 'style!css!stylus' },

    与

    { test: /\.scss$/, loader: 'style!css!sass' },

    现在我只收到 chrome 浏览器错误，因为我没有安装 chrome 

    npm test

> ng6-starter@0.0.1 test /development/sites/www/Angular
> karma start


START:
24 10 2016 08:41:56.417:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
24 10 2016 08:41:56.424:INFO [launcher]: Starting browser Chrome
24 10 2016 08:41:56.425:ERROR [launcher]: No binary for Chrome browser on your platform.
  Please, set "CHROME_BIN" env variable.

Finished in 0 secs / 0 secs

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-02-22
      • 1970-01-01
      • 2019-10-22
      • 1970-01-01
      • 1970-01-01
      • 2014-03-23
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode