All geek questions in one place

Creating static CSS files with webpack

I am currently developing an application that uses different front-end themes. These topics are only CSS files that can be selected by the user.

Technically, these topics are .scss files that are compiled by webpack and loaded via the standard link tag in angular:

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

The configuration of my shared webpack is as follows:

theme1CssExtractor = new ExtractTextPlugin('themes/theme-1.css'),     
theme2CssExtractor = new ExtractTextPlugin('themes/theme-2.css'),     

module.exports = new WebpackConfig().merge({

entry: {
    app: [
        './app/main.ts',
        './assets/sass/themes/theme-1.scss',
        './assets/sass/themes/theme-2.scss'
    ],
},

output: {
    path: "build/",
    filename: "[name].bundle.js",
    publicPath: "/build/"
},

plugins: [
    theme1CssExtractor,
    theme2CssExtractor,
],

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader']
        },
        [
            {
                test: /theme-1\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme1CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            },
            {
                test: /theme-2\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme2CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            }
        ]
    ]
}

This works fine until I want to use a webpack-dev server with hot plug-in (HMR), because extractTextPlugin does not support HMR. When I simply turn off extractTextPlugin (options.disable) or delete them, all themes are compiled into the main module, and this is from cource-breaks themes, because they are all used together.

CSS webpack extractTextPlugin? enntries/chunks, ... .

: CSS SCSS JS ExtractTextPlugin.

, - .

+4
1

Webpack , :

  • development: ExtractTextPlugin (. , )
  • production: ExtractTextPlugin,

, este.

, ExtractTextPlugin ( , ): , theme-1.scss, theme-2.scss , Webpack ( ). : - :

require('../assets/sass/themes/' + theme + '.scss');

(), "". Webpack "assets/sass/themes/" ( Webpack, "require" ), , ExtractTextPlugin ( - ).

, ( "require", , , ExtractTextPlugin ), , <link> <head> HTML. . , :

if (!__DEV__) {
  // do adding <link> to the <head>
}

(. este, DefinePlugin __DEV__).

, ...

+2

Source: https://habr.com/ru/post/1613495/

More articles:


All Articles