Question

我最近开始使用 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.

Answer 1

事实证明我还需要在 karma.conf.js

中替换此代码部分

{test：/\.styl $ /，loader：'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

NG6 Angular sass文件错误

1 个答案: