How to use scss files.

[spiroski]

I have a problem using scss files.

I have a file bootstrap.scss located in app/Resources/assets/bootstrap/.

the contents of the file just in case it's important are:

//$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';

$bootstrap-sass-asset-helper: true;

a {
  color: green !important;
}

// Core variables and mixins
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";

// Reset and dependencies
@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";

// Core CSS
@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";

// Components
@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";

// Components w/ JavaScript
@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";

// Utility classes
@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

Inside my base.html.twig file i have

<link rel="stylesheet" href="{{ webpack_asset('@app/bootstrap/bootstrap.scss') }}">

This generates the following error when I try to load the page:

An exception has been thrown during the rendering of a template ("No information in the manifest for type css (key bootstrap-b7f5bc1fb5a2a79e7c4f40fb0c01e3ac4212473a, asset @app/bootstrap/bootstrap.scss). Probably extension is unsupported or some misconfiguration issue. If this file should compile to javascript, please extend entry_file.disabled_extensions in config.yml").
500 Internal Server Error - Twig_Error_Runtime
1 linked Exception: RuntimeException »

my config.yml contains only this regarding this bundle:

maba_webpack:
    aliases:
        additional:
            npm: "%kernel.root_dir%/../node_modules"     # or any other path where assets are installed
            vendor: "%kernel.root_dir%/../vendor"

And my webpack.config.js is the default one.

[mariusbalcytis]

If you've got this error you've either did not run dev-server (I guess you did) or you've got an error. You should see it in dev-server output.

I also assume you have installed bootstrap-sass?

[spiroski]

I have installed bootstrap-sass, and there is no error in the dev-server. Just in case I also tried with compile. This is the output ( no error ):

Hash: 14a2ab04895d6bbbd4ca
Version: webpack 1.14.0
Time: 5430ms
                                                       Asset     Size  Chunks             Chunk Names
bootstrap-b7f5bc1fb5a2a79e7c4f40fb0c01e3ac4212473a.bundle.js   631 kB       0  [emitted]  bootstrap-b7f5bc1fb5a2a79e7c4f40fb0c01e3ac4212473a
messaging-376ba8df9eaa1f6be03885ae3fae98d5a271d833.bundle.js  1.81 MB       1  [emitted]  messaging-376ba8df9eaa1f6be03885ae3fae98d5a271d833
    + 383 hidden modules

And here's the generated manifest:

<?php return array (
  'bootstrap-b7f5bc1fb5a2a79e7c4f40fb0c01e3ac4212473a' => 
  array (
    'js' => '/compiled/bootstrap-b7f5bc1fb5a2a79e7c4f40fb0c01e3ac4212473a.bundle.js',
  ),
  'messaging-376ba8df9eaa1f6be03885ae3fae98d5a271d833' => 
  array (
    'js' => '/compiled/messaging-376ba8df9eaa1f6be03885ae3fae98d5a271d833.bundle.js',
  ),
);

Here is a gist of the file bootstrap-b7f5bc1fb5a2a79e7c4f40fb0c01e3ac4212473a.bundle.js https://gist.github.com/spiroski/61d033fd2b25a9e533ca8f4c223a1b75

[mariusbalcytis]

Could it be that you're using older version of this bundle? If so, try adding

maba_webpack:
    config:
        parameters:
            extract_css: true

This defaulted to false in earlier version, currently it defaults to true inside webpack.config.js.

[mariusbalcytis]

Or maybe you've installed older version and after update you did not re-run bin/compile maba:webpack:setup command?

[spiroski]

That was the problem. After adding that to the config it works. Should I rerun the setup?

[mariusbalcytis]

Yes, setup command should be re-run each time the bundle is updated. If you've modified the config, it should be merged. This way bundle can introduce new properties, environment variables and features inside default configuration files.