Updated webpack with file-loaders for slick-carousel (#449)

This commit is contained in:
darth-coder00 2021-09-09 15:14:12 +05:30 committed by GitHub
parent 87e382edba
commit 60a0db9ad6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 109 additions and 8 deletions

View File

@ -18494,6 +18494,25 @@
}
}
},
"sass": {
"version": "1.39.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.39.0.tgz",
"integrity": "sha512-F4o+RhJkNOIG0b6QudYU8c78ZADKZjKDk5cyrf8XTKWfrgbtyVVXImFstJrc+1pkQDCggyidIOytq6gS4gCCZg==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
}
},
"sass-loader": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz",
"integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==",
"dev": true,
"requires": {
"klona": "^2.0.4",
"neo-async": "^2.6.2"
}
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

View File

@ -150,6 +150,8 @@
"postcss-loader": "^6.1.0",
"prettier": "^2.1.2",
"react-test-renderer": "^16.14.0",
"sass": "^1.39.0",
"sass-loader": "^12.1.0",
"style-loader": "0.23.1",
"ts-jest": "^26.4.4",
"ts-loader": "^8.0.14",

View File

@ -67,8 +67,19 @@ module.exports = {
// .css and .scss files to be handled by sass-loader
// include scss rule and sass-loader if injecting scss/sass file
{
test: /\.(css)$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
test: /\.(css|s[ac]ss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: require.resolve('sass'),
},
},
'postcss-loader',
],
// No exclude, may need to handle files outside the source code
// (from node_modules)
},
@ -78,19 +89,34 @@ module.exports = {
use: ['@svgr/webpack'],
exclude: /node_modules/, // Just the source code
},
//
// different urls to be handled by url-loader
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/i,
test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: `[name].[ext]`,
},
},
],
exclude: /node_modules/, // Just the source code
},
// different urls to be handled by url-loader in node_modules
{
test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: `[name].[ext]`,
},
},
],
include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
},
// Font files to be handled by file-loader
{
test: /\.ttf$/,
@ -105,6 +131,20 @@ module.exports = {
],
exclude: /node_modules/, // Just the source code
},
// Font files to be handled by file-loader in node_modules
{
test: /\.ttf$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
},
],
},

View File

@ -68,8 +68,19 @@ module.exports = {
// .css and .scss files to be handled by sass-loader
// include scss rule and sass-loader if injecting scss/sass file
{
test: /\.(css)$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
test: /\.(css|s[ac]ss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: require.resolve('sass'),
},
},
'postcss-loader',
],
// No exclude, may need to handle files outside the source code
// (from node_modules)
},
@ -79,19 +90,34 @@ module.exports = {
use: ['@svgr/webpack'],
exclude: /node_modules/, // Just the source code
},
//
// different urls to be handled by url-loader
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/i,
test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: `[name].[ext]`,
},
},
],
exclude: /node_modules/, // Just the source code
},
// different urls to be handled by url-loader in node_modules
{
test: /\.(png|jpg|jpeg|gif|svg|ico|eot|woff|woff2)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: `[name].[ext]`,
},
},
],
include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
},
// Font files to be handled by file-loader
{
test: /\.ttf$/,
@ -106,6 +132,20 @@ module.exports = {
],
exclude: /node_modules/, // Just the source code
},
// Font files to be handled by file-loader in node_modules
{
test: /\.ttf$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
include: /node_modules\/slick-carousel/, // Just slick-carousel from node_modules
},
],
},