从动态导入的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 Mix配置脚本（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-loader/useable使样式可用或使用style.use()使样式禁用。

以下代码显示了如何使用style.unuse()。

webpack.config.js

style-loader/useable

您要动态加载animate.css的文件

{
  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" },
        ],
      },
    ],
  },
}