Sass @use (НЕ @import) с путями node_modules - PullRequest
0 голосов
/ 27 января 2020

Я использую Webpack и Dart Sass, и кажется, что традиционный ярлык ~ (тильда) для node_modules не работает с @use. Я должен указать все мои пути node_modules в длинном относительном синтаксисе:

@use "../../../node_modules/animate.css/animate.css";

Это раздражает. Нет лучшего способа? Для справки вот мой конфиг Webpack:

module.exports = {
    entry : {
        "app" : "app.js"
    },
    output : {
        path : path.resolve( __dirname, './dist/' ),
    },
    mode : 'development',
    devtool : 'inline-source-map',
    module : {
        rules : [
            {
                test : /\.js$/,
                exclude : [ /(node_modules|bower_components)/ ],
                use : {
                    loader : 'babel-loader',
                    options : {
                        cacheDirectory : true,
                        presets : [
                            [
                                '@babel/preset-env',
                                {
                                    modules : false,
                                    corejs : {
                                        version : 3,
                                        proposals : true
                                    },
                                    useBuiltIns : 'usage',
                                    targets : {
                                        browsers : [
                                            "> 1%",
                                            "last 2 versions",
                                            "Firefox ESR",
                                        ],
                                    },
                                }
                            ],
                        ],
                        plugins : [ '@babel/plugin-syntax-dynamic-import', '@babel/plugin-transform-runtime', ],
                    },
                },
            },
            {
                test : /\.(ttf|eot|woff2?)$/i,
                use : [ {
                    loader : 'file-loader',
                    options : {
                        name : 'fonts/[name].[ext]'
                    }
                } ]
            },
            {
                test : /\.s[ac]ss$/i,
                use : [
                    'style-loader',
                    'css-loader',
                    {
                        loader : 'sass-loader',
                        options : {
                            implementation : require( 'sass' ),
                        },
                    },
                ],
            },
            {
                test : /\.(pcss|css)$/,
                loader : MiniCssExtractPlugin.loader
            },
            {
                test : /\.(png|jpe?g|gif|svg|webp)$/i,
                use : [ {
                    loader : 'file-loader',
                    options : {
                        name : 'img/[name].[hash].[ext]'
                    }
                } ]
            },
        ],
    },
    plugins : [
        new CopyWebpackPlugin(
            [
                {
                    from : "./resources/assets/scripts/workbox-catch-handler.js",
                    to   : "js/[name].[ext]"
                }
            ]
        ),
        new ManifestPlugin(
            {
                fileName : fileName,
                basePath : "",
                map      : ( file ) => {
                    file.name = file.name.replace( /(\.[a-f0-9]{32})(\..*)$/, '$2' );
                    return file;
                },
            }
        ),
        new MiniCssExtractPlugin( {
            path : path.resolve( __dirname, './dist/' ),
            filename : path.join( './css', '[name].[chunkhash].css' ),
        } ),
        new webpack.HotModuleReplacementPlugin(),
        new WebpackNotifierPlugin( {
            title : 'Webpack',
            excludeWarnings : true,
            alwaysNotify : true,
        } ),
    ],
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...