Я использую 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,
} ),
],
}