I have a project using the Vue CLI with the webpack-simple template. I'm pulling in an NPM package that I'm working on that provides sass files. Some of the sass files have url's to images within the NPM propject. Here is an example of the style in the NPM package.
background: url("../../../assets/icons/icon-close-blue.svg") no-repeat center;
The image icon-close-blue.svg
is located in the NPM package relative to the SCSS file.
I'm pulling the scss file to my project like this
@import "~@chewy/design-system/src/design-system.scss";
When I start up the dev server with yarn I get this error.
./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit":1,"remove":true}!./node_modules/vue-style-
loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-
compiler?{"vue":true,"id":"data-v-
7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-
loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?
type=styles&index=0&bustCache!./src/App.vue
Module build failed: ModuleNotFoundError: Module not found: Error:
Can't resolve '../../../assets/icons/checkmark-green.svg' in
'/Users/dsteinberg/Code/chewy-design-platform/src'
Here is my webpack config
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: {
src: './src/main.js',
pages: './src/pages.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: 'http://localhost:8080/dist/',
filename: '[name].build.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader'],
fallback: 'vue-style-loader'
}),
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '/static/img/[name].[hash:7].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '/static/media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '/static/fonts/[name].[hash:7].[ext]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins: [
new ExtractTextPlugin("[name].style.css")
]
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Is there anything I can do to get webpack to handle these image paths?