Angular 2 - how to use scss with bootstrap 4 in testing using webpack

Question

I have issues with using scss files while testing in angular 2.2.1. My component is compiled fine, but it not working with testing. I am using angular 2 starter seed, the original code using css in their code. In webpack test / common, I had added this configuration to webpack:

{
  test: /\.scss$/,
  loaders: ['raw-loader', 'sass-loader']
}

My component code:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './scss/application.scss'
  ]
})

The 1st error message I got is:

Failed to load assets/scss/application.scss
        [email protected]:6807:35
        [email protected]:6700:51

I suspect the error due to in spec-bundle.js file, I didn't include bootstrap 4 scss, application

The 2nd error code I got after copied bootstrap 4 scss into my code:

  color: $text-color;
          ^
        Undefined variable: "$text-color".

I am pretty sure my scss files are fine, since I can compile and run. I have no clue at this point how to resolve this issue. An

Answer 1

• Firstly, did you have .bootstraprc in source root folder?
• Then, try my configuration (It's worked for me)

Note: Bootstrap 4 require jQuery and Tether

/* webpack.common.js */
...
resolve: {
   extensions: ['.ts', '.js', '.json', '.css', '.scss'],
   modules: [helpers.root('src'), helpers.root('node_modules')],
},
module: {
    rules: [
       ...
       {
         test: /\.scss$/,
         loaders: ['to-string-loader', 'css-loader', 'sass-loader']
       },
       { 
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
         loader: "url-loader?limit=10000&mimetype=application/font-woff" },
       { 
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
         loader: "file-loader" 
       },
// For bootstrap 4
       { 
         test: /bootstrap\/dist\/js\/umd\//, 
         loader: 'imports?jQuery=jquery' 
       }
    ]
},
plugins: [
     ...
     new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            Tether: "tether",
            "window.Tether": "tether",
            Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
            Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
            Button: "exports-loader?Button!bootstrap/js/dist/button",
            Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
            Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
            Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
            Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
            Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
            Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
            Util: "exports-loader?Util!bootstrap/js/dist/util"
        }),
]

In vendor.browser.ts, please import jQuery and bootstrap-loader

import 'bootstrap-loader';
import 'jquery';

And packakge.json if you need

"dependencies": {
   ...
   "bootstrap": "^4.0.0-alpha.5",
   "bootstrap-loader": "2.0.0-beta.16",
   "jquery": "^2.2.4" 
   ...
},
"devDependencies": {
   ...
   "@types/jquery": "^2.0.34",
   "css-loader": "^0.26.0",
   "file-loader": "^0.9.0",
   "node-sass": "3.13.0",
   "raw-loader": "0.5.1",
   "resolve-url": "^0.2.1",
   "resolve-url-loader": "^1.6.0",
   "sass-loader": "^4.0.2",
   "string-replace-loader": "1.0.5",
   "style-loader": "^0.13.1",
   "tether": "^1.3.8",
   "to-string-loader": "^1.1.4",
   ...
}