从动态导入的ES6模块加载CSS

Question

我的项目是通过Laravel Mix与Webpack一起构建的。我想动态导入一个ES6模块，该模块本身导入其他模块和一个样式表。下面是动态导入的模块(loadJQueryTextillate.js)：

import style from 'animate.css/animate.css';
import 'letteringjs';
import 'textillate';

style.use();

export default () => {
};

下面是动态导入loadJQueryTextillate.js (animatedText.js)的模块：

import isInViewport from './isInViewport';

function maybeAnimateText( elem ) {
    const $el = $( elem );
    let bounding,
        el_html,
        el_lines,
        in_viewport = $el.data( 'in-viewport' ) || false;
    const viewport_height = window.innerHeight || document.documentElement.clientHeight;

    if ( $el.hasClass( 'opaque' ) ) {
        bounding = elem.getBoundingClientRect();

        if ( in_viewport && !isInViewport( elem ) && ( bounding.top > viewport_height ) ) { // Element scrolled off screen
            in_viewport = false;
            $el.removeClass( 'opaque' ).find( 'ul.texts' ).remove().end().text( $.trim( $el.text() ) );
        } else if ( isInViewport( elem ) ) {
            in_viewport = true;
        }

        $el.data( 'in-viewport', in_viewport );
        return;
    } else if ( !isInViewport( elem ) ) {
        return;
    }

    el_html = $el.html();
    el_lines = el_html.split( /<br\s*\/?>/ );

    $.each( el_lines, function( key, line ) {
        el_lines[ key ] = $.trim( line );
    } );

    el_html = '<span class="line">' + el_lines.join( '</span><span class="line">' ) + '</span>';

    import( /* webpackChunkName: "scripts/jQuery.textillate" */ './loadJQueryTextillate' ).then( () => {
        $el.html( el_html ).addClass( 'opaque' ).children( '.line' ).textillate( {
            in : {
                effect : $el.data( 'in-effect' ) || 'fadeInLeft',
                delay  : $el.data( 'delay' ) || 12,
            },
        } );
    } );
}

export default () => {
    const $els = $( '.tlt' );

    if ( 0 === $els.length ) {
        return false;
    }

    $els.each( function( index, elem ) {
        maybeAnimateText( elem );
    } );

    return true;
};

下面是JS入口脚本(app.js)：

window.$ = window.jQuery = require( 'jquery' );

import 'bootstrap';
import checkAnimatedText from './modules/animatedText';

$( window ).on( 'load', () => {
    checkAnimatedText();
} );

最后，这里是Laravel混合配置脚本(webpack.mix.js)：

const mix = require( 'laravel-mix' );
require( 'laravel-mix-versionhash' );

// Public path helper
const publicPath = path => `${mix.config.publicPath}/${path}`;

// Source path helper
const src = path => `resources/assets/${path}`;

// Public Path
mix
    .setPublicPath( './dist' )
    .setResourceRoot( `/wp-content/themes/magnetar/${mix.config.publicPath}/` )
    .webpackConfig( {
        module : {
            rules : [ {
                test : /animate\.css$/,
                use  : [ {
                    loader : "style-loader/useable",
                }, { loader : "css-loader" } ],
            } ],
        },
        output : { publicPath : mix.config.resourceRoot },
    } );

// Browsersync
mix.browserSync( 'magnetar.localhost' );

// Styles
mix.sass( src`styles/app.scss`, 'styles' );

// Assets
mix.copyDirectory( src`images`, publicPath`images` )
    .copyDirectory( src`fonts`, publicPath`fonts` );

// JavaScript
mix.js( src`scripts/app.js`, 'scripts' );
//.extract();

// Autoload
/*mix.autoload( {
    jquery : [ '$', 'window.jQuery' ],
} );*/

// Source maps when not in production.
mix.sourceMaps( false, 'source-map' );

// Hash and version files in production.
mix.versionHash( { length : 16 } );

编译器输出：

ERROR in ./node_modules/animate.css/animate.css (./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/style-loader/useable.js!./node_modules/css-loader!./node_modules/animate.css/animate.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

> 1 | var refs = 0;
    | ^
  2 | var dispose;
  3 | var content = require("!!../css-loader/index.js!./animate.css");

编辑:更新了loadJQueryTextillate.js、webpack.mix.js和编译器输出的内容。

Answer 1

您可以尝试使用style-loader/useable动态加载css文件。在脚本代码中，应使用style.use()使样式可用，或使用style.unuse()使样式禁用。

下面的代码展示了如何使用style-loader/useable。

webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.useable\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
        ],
      },
      {
        test: /\.useable\.css$/,
        use: [
          {
            loader: "style-loader/useable"
          },
          { loader: "css-loader" },
        ],
      },
    ],
  },
}

要动态加载animate.css的文件

import style form './animate.css';

// make aniamte.css useable
style.use();
// make animate.css disable
style.unuse();