Разрешить относительный путь от node_modules до папки Dist с помощью Webpack
Я использую компонент React в качестве пакета NPM. в компоненте у меня есть файл SCSS с URL-адресом (../iamges/img..), но на самом деле папка изображений, расположенная в папке Dist, как я могу указать Webpack, чтобы взять относительный путь из node_modules и обслуживать его из папки изображений, расположенной в Dist?
located in node_modules =>
background: url('../images/some-icon.svg') no-repeat center center;
Конфигурация вебпака:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
devtool: 'inline-module-source-map',
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'resolve-url-loader',
// options: {
// debug: true,
// root: path.join(__dirname, './dist/images'),
// includeRoot: true,
// absolute: true,
// },
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false,
},
},
],
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader?name=/images/[name].[ext]',
options: {
limit: 10000,
},
},
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
// modules: [path.resolve(__dirname, '/images'), 'node_modules'],
alias: {
'react-redux': path.resolve('./node_modules/react-redux'),
},
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
hot: true,
publicPath: '/dist/',
},
};
Babel.config.js
module.exports = {
// presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-export-default-from',
'@babel/transform-runtime',
],
sourceType: 'unambiguous',
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
'@babel/preset-react',
],
};
dist
-- images
-- index.html
ОШИБКА:
ERROR in ./node_modules/comp/src/styles/details.scss (./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--5-3!./node_modules/compdetails/src/styles/details.scss)
Module not found: Error: Can't resolve '../images/icon.svg'
Ответы 1
Все, что указано через url('...') в css, будет вычисляться со ссылкой на путь развернутого приложения (scss не будет вычислять путь, если не используется переменная или функция):
Например:
Если модуль SCSS указанного компонента имеет background: url('../images/some-icon.svg') no-repeat center center;
Окончательная компиляция CSS будет такой же (это также связано с тем, что компонент не использует никаких переменных или функций SCSS для вычисления окончательного пути).
Таким образом, ваше приложение всегда будет пытаться найти это изображение как:
Пример: http://localhost:3000/../images/some-icon.svg что является проблемой.
(.. называется родительским каталогом)
Если вы попытаетесь запустить свое приложение с каким-либо вложенным URL-адресом (также известным как подконтекст) как http://localhost:3000/sub-url/ и сохраните свои изображения параллельно папке sub-url, оно будет работать автоматически.
-- /
|
|-- sub-url
|
|-- index.html
|-- images
|
|-- some-icon.svg
Другим вариантом может быть переопределение компонента SCSS вашим.
Вы уже нашли решение для использования resolve-url-loader, но в этом случае вам нужно импортировать файл scss компонента в ваш scss.
поэтому ваш конфигурация веб-пакета должен выглядеть так:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
devtool: 'inline-module-source-map',
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
// CHANGE HERE
{
loader: 'resolve-url-loader',
options: {
root: '/images', // considering all your images are placed in specified folder. Note: this is just a string that will get as prefix to image path
includeRoot: true,
absolute: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false,
},
},
],
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader?name=/images/[name].[ext]',
options: {
limit: 10000,
},
},
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
// modules: [path.resolve(__dirname, '/images'), 'node_modules'],
alias: {
'react-redux': path.resolve('./node_modules/react-redux'),
},
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
hot: true,
publicPath: '/dist/',
},
};
Я надеюсь, что это помогает.
вы просмотрели : stackoverflow.com/questions/27502608/…