Using Webpack to Bundle CSS with Images and Fonts

-
One of my teams at work is currently developing in Angular 2, and we use Webpack for all of our TypeScript transpilation, module loading, and bundling. Yesterday we ran into an issue where one of the developers had made references to CSS files located in the node_modules directory of one of the 3rd party libraries we're using. This presented a problem because we don't distribute the node_modules folder as part of our build and deployment process -- we use JavaScript bundles created by Webpack.

To correct the problem, I leveraged Webpack again, this time to bundle the required CSS files. The first step was to create a SASS file (.scss) which would be used as the entry point by Webpack. The reasoning behind using SASS was to allow us to do more than just reference the other stylesheets. But for the time being, it would do just that, and act as our entry point for Webpack to build its dependancy graph of our styles.

Here's what the SASS file looked like at the start:

@import '../js/node_modules/primeng/resources/primeng.min';

And here's my entry point in my Webpack config:

module.exports = {
  entry: {
    'polyfills': './ng/polyfills.ts',
    'vendor': './ng/vendor.ts',
    'app': './ng/main.ts',
    'primestyles': '../sass/primestyles.scss'
  },

I started by just referencing one of the two stylesheets we were using. But once I got Webpack set up to include this new entry point, I received some errors concerning image files that the spreadsheet was referencing. This required setting up an additional loader in Webpack to take the image files into account and include them:

{
    test: /\.(png|gif)$/,
    loader: require.resolve("file-loader")
},

Notice in my loader assignment above, I'm using the require.resolve() method. This is because, for whatever reason, Webpack wasn't finding the file-loader module. It was installed, and I even re-installed it, to no avail. The fix was to use require.resolve().

I also had to make use of the resolve-url-loader, which requires sass-loader to specify the sourceMap parameter:

{
  test: /\.scss$/i, 
  exclude: /node_modules/, 
  loader: ExtractTextPlugin.extract('css-loader!resolve-url-loader!sass-loader?sourceMap')
},

To make sure that this new bundle had a CSS extension, I had to use the extract-text-webpack-plugin (as shown in the loader assignment above). This was getting a bit involved! This required me to require it in my Webpack config:

var ExtractTextPlugin = require('extract-text-webpack-plugin');


And to have it configured correctly:




plugins: [
  new ExtractTextPlugin('[name].css')
],




It's worth noting that the extract() method of the extract-text-webpack-plugin wouldn't work with the array syntax -- I needed to use the "single string with loaders separated by exclamation marks" approach, or else it gave me an error. Now that I had all that set up and working, I added an @import to the other CSS to my entry point:




@import '../js/node_modules/primeng/resources/themes/omega/theme.css';
@import '../js/node_modules/primeng/resources/primeng.min';



I expected everything to still work, but I was wrong, because this other CSS file had some font dependencies! To take care of that...I needed another loader (url-loader) and to specify 2 more loader specifications in my Webpack config:




{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader"
}






Running this caused Webpack to tell me it needed some additional Node modules. I needed to add font-awesome, font-awesome-webpack, and less.



And at this point, everything was working. The final result was that I had a new CSS bundle in my dist directory (where I have Webpack configured to place my output), and all of the required image and font files are copied there as well. The final change was to update the references in the HTML which had previously been referencing the CSS files from the node_modules folder. Done! It wasn't the simplest, or most straight-forward fix, but it got the job done.









































Comments











Post a Comment



















Popular Posts









Resolving the "n timer(s) still in the queue" Error In Angular Unit Tests






-















A few months ago one of the developers I work with ran into the below error in an Angular unit test:   1 timer(s) still in the queue   The fix was to specify a particular amount of time in the tick() call as shown below:    it( 'should set accountConfirmationDetails when getAccountConfirmationDetails is called' , fakeAsync(() => {            // Arrange            let  spyGetAccountConfirmationDetails = spyOn(accountService,  'getAccountConfirmationDetails' )           .and           .returnValue(Promise.resolve(AccountMockData.mockAccountConfirmationDetails));                          // Act           fixture.detectChanges();           tick(15000);              // Assert           expect(spyGetPaymentConfirmationDetails).toHaveBeenCalled();             expect(comp.zone).toBe(42);             expect(comp.hasValidProfile).toBeTruthy();   }));   Hoping this helps someone!








Read more










Silent Renew and the "login_required" Error When Using oidc-client






-















I recently implemented the Silent Renew functionality of oidc-client in an Angular application I work on, and was getting reports that the users' tokens were still expiring. This made no sense to me as I'd verified the code was working during development, but yesterday I found the problem and am hoping it will save someone some time.   The error we were getting back was "Error from signinSilent: login_required". This indicates that the user's session is no longer active on IdentityServer and they must re-authenticate -- which, of course, is what we're trying to prevent by using Silent Renew. In our case, the problem wasn't with the Silent Renew functionality, but rather the user's session was expired. The reason why  it was expired was because, for some reason, we were setting the session length to 15 minutes instead of the default 10 hours .   What was occurring was that Silent Renew was attempting to renew a token after 55 minutes (60 minutes expirat








Read more










How to Get Norton Security Suite Firewall to Allow Remote Desktop Connections in Windows






-














Image







I ran into an issue recently with RDP connections being blocked by the firewall in Norton Security Suite. I checked the traffic rules under Settings > Firewall > Traffic Rules  and found that it was enabled by default (and couldn't be edited):        But during further research, I found  this page  on Norton's support site which discusses the different trust levels of networks and mentions that, for the Public trust level, "This setting also blocks remote desktop connections by default.". I checked my network's trust level, and sure enough, it was set to Public (I'm not sure how/why). (Sidebar: Notice in the screenshot above that allowing Remote Desktop for Public Networks is defaulted to Allow , though that rule is not active).     Here's what my network trust level looks like now after changing the setting to Private (accessible under Settings > Firewall > General Settings > Network Trust ):         After changing the network trust level t








Read more










Fixing the "Please add a @Pipe/@Directive/@Component annotation" Error In An Angular App After Upgrading to webpack 4






-















I'm currently in the process of upgrading an Angular application which does not  use the Angular CLI from webpack 2 to webpack 4. The incremental upgrade from webpack 2 to 3 was easy, but once I made the jump from 3 to 4, I encountered a lot of problems. I went through them one by one, but the one that had me stumped was the following: Unhandled Promise rejection: Unexpected value 'MakePositivePipe' declared by the module 'SharedModule'. Please add a @Pipe/@Directive/@Component annotation. ; Zone: <root> ; Task: null ; Value: Error: Unexpected value 'MakePositivePipe' declared by the module 'SharedModule'. Please add a @Pipe/@Directive/@Component annotation. The code was transpiling/compiling fine, but this error was occurring when I'd navigate to a page containing this pipe. This code has worked fine under webpack 2 and 3. I made sure that the pipe was being set up as a declaration , which it was. What finally  corrected the issue for me w








Read more










How to Determine if a Column Exists in a DataReader






-















I recently had to work on something which required me to query a database, open the results in a DataReader, and check for the existence of a particular column.  While the DataReader doesn't have a method to do this, with just a few steps I was able to accomplish this task.  Here's how. First, the DataReader has a method named GetSchemaTable() , which returns a DataTable consisting of information regarding the data contained in the DataReader.  The first column in this DataTable is named ColumnName , and its value is (obviously) the name of the column. Knowing this, we can loop through the rows in the DataTable, checking the ColumnName column for a value that equals the name of the column we're looking for.  To this end, I wrote a static method in one of my classes which takes the DataReader and the name of the column being sought: (C#) public static bool HasColumn(DbDataReader Reader, string ColumnName) {    foreach (DataRow row in Reader.GetSchemaTable().Rows)    {       








Read more