Skip to content

Having Trouble Implementing component sass stylesheets. #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
aedensixty opened this issue Oct 10, 2016 · 5 comments · Fixed by #47
Closed

Having Trouble Implementing component sass stylesheets. #33

aedensixty opened this issue Oct 10, 2016 · 5 comments · Fixed by #47
Labels
enhancement help wanted upstream

Comments

@aedensixty
Copy link

aedensixty commented Oct 10, 2016 •
edited
Loading

Having trouble implementing sass stylesheets in components when running npm build only. Getting an error where the relative directory that is being read isn't relative to the compiled destination that the "*.scss.shim.ts" is being created. It is still relating back to the main src from the dev app directory (e.g. '../../../../../app/pages/home/home.scss.shim.ts') from the compiled directory. Any help would be appreciated. Not sure if it is related to angular-webpack-starter problem or have seen one other person with the same problem on 'angular/angular#11688'.

home.component.ts

@Component({
    selector: 'as-home',
    templateUrl: './home.html',
    styleUrls: [
        './home.scss'
    ]
})
export class HomeComponent {}

webpack.common.js example:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const helpers = require('./helpers');
const constants = require('./constants');

const isProd = process.env.npm_lifecycle_event === 'build';

module.exports = {
    entry: {
        'polyfills': './src/app/polyfills.ts',
        'vendor': './src/app/vendor.ts',
        'app': './src/app/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    module: {
        rules: [{
                enforce: 'pre',
                test: /^((?!(ngfactory|shim)).)*ts$/,
                loader: 'tslint'
            }, {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular2-router-loader?loader=system&genDir=src/compiled/src/app&aot=' + isProd
                ]
            }, {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file"
            }, {
                test: /\.html$/,
                loader: 'html',
                exclude: helpers.root('src', 'public')
            }, {
                test: /.(png|woff(2)?|jpeg|jpg|eot|ttf|svg|otf|scss|css)(\?[a-z0-9=\.]+)?$/,
                exclude: helpers.root('src', 'app'),
                loader: 'url-loader?limit=100000'
            }, {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: ['css-loader']
                })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw'
            },
            {
                test: /\.scss$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: ['sass-loader']
                })
            },
            {
                test: /\.scss$/,
                include: helpers.root('src', 'app'),
                loader: 'raw'
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery'
        }),

        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            constants.CONTEXT_REPLACE_REGEX,
            helpers.root('./src') // location of your src
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            favicon: 'src/favicon.ico',
            template: 'src/public/index.html'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                tslint: {
                    emitError: false,
                    failOnHint: false
                }
            }
        })
    ]

};

tsconfig-aot.json Example:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "outDir": "output",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "forkChecker": true,
    "useCache": true
  },
  "angularCompilerOptions": {
   "genDir": "src/compiled",
   "skipMetadataEmit" : true
 },
  "exclude": [
    "node_modules",
    "config",
    "src/compiled",
    "e2e",
    "src/**/*.spec.ts",
    "src/app/main-ngc.ts",
    "src/app/main.ts",
    "typings",
    "coverage",
    "dist",
    "report",
    "src/tmp",
    "src/public/components"
  ]
}

Full error Recieved:

ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../../app/pages/home/home.scss.shim' in '/Users/aeden/web/sas-angular-travel/frontend/src/compiled/src/app/pages/home'
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/Compilation.js:232:38
    at onDoneResolving (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:40:20)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:117:20
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:241:17)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:723:17
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:167:37
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:112:22
    at onResolved (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:108:46)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:39:4
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:108:46)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:45:5
resolve '../../../../../app/pages/home/home.scss.shim' in '/Users/aeden/web/sas-angular-travel/frontend/src/compiled/src/app/pages/home'
  using description file: /Users/aeden/web/sas-angular-travel/frontend/package.json (relative path: ./src/compiled/src/app/pages/home)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/aeden/web/sas-angular-travel/frontend/package.json (relative path: ./src/compiled/src/app/pages/home)
    using description file: /Users/aeden/web/sas-angular-travel/frontend/package.json (relative path: ./src/app/pages/home/home.scss.shim)
      as directory
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.json doesn't exist
      .css
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.css doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.scss doesn't exist
      .html
        Field 'browser' doesn't contain a valid alias configuration
        /Users/aeden/web/sas-angular-travel/frontend/src/app/pages/home/home.scss.shim.html doesn't exist
 41% building modules 266/467 modules 201 active ...ngular/common/src/directives/ng_if.js
/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:123
    if(!this._plugins[name] || this._plugins[name].length === 0) return callback(null, init);
                                                                     ^
TypeError: Cannot read property 'profile' of null
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/Compilation.js:237:12
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:74:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:123:70)
    at onDoneResolving (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:49:11)
    at onDoneResolving (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:165:6)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:161:6
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at async.forEachOf.async.eachOf (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:236:30)
    at _parallel (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:717:9)
    at Object.async.parallel (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:731:9)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:154:11
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:246:17)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:723:17
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/node_modules/async/lib/async.js:167:37
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/webpack/lib/NormalModuleFactory.js:113:7
    at onResolved (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:72:10)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:122:22)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:22
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:122:22)
    at loggingCallbackWrapper (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/aeden/web/sas-angular-travel/frontend/node_modules/tapable/lib/Tapable.js:210:15
    at innerCallback (/Users/aeden/web/sas-angular-travel/frontend/node_modules/enhanced-resolve/lib/Resolver.js:122:22)
@antonybudianto7
Copy link
Collaborator

please post your reproducable to there for now, currently I hold the support for SCSS/postcss (having issue with extract-text-plugin in webpack 2)

@aedensixty
Copy link
Author

Ok, there is already one there. I will wait and see if there is a response anytime but just going to add a gulp-sass to the start of the build and use css temporarily until there is a fix.

@antonybudianto7
Copy link
Collaborator

antonybudianto7 commented Oct 10, 2016 •
edited
Loading

By the way, since it's using AoT compilation, we must compile down to *.css in the end, since it's what ngc supports.
I'm investigating to use @ngtools/webpack for aot because it integrates directly with webpack and maybe we can use the sass loader, currently ngc works in another script which make it impossible to integrate aot with loaders

@antonybudianto7
Copy link
Collaborator

angular/angular-cli#2586

@antonybudianto7 antonybudianto7 mentioned this issue Oct 21, 2016
Merged
@antonybudianto7
Copy link
Collaborator

antonybudianto7 commented Oct 21, 2016 •
edited
Loading

ngtools webpack is now working. But I prefer to use postcss for now.
Of course you can modify to use sass loader

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted upstream
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Feat postcss antonybudianto/angular-webpack-starter
2 participants
@antonybudianto7 @aedensixty