I'm facing a problem with loading .mp3 files with Nuxt.JS (Vue.js)...
I've tried to load the file without an specific loader and webpack tells that he need one specific loader for the file and when i added the url-loader in nuxt.config.js file:
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
config.module.rules.push({
test: /\.(ogg|mp3|wav)$/i,
loader: 'url-loader'
})
}
}
throws the error:
TypeError
Cannot read property 'middleware' of undefined
Somebody have used another loaders in Nuxt.Js?
Thanks in advance!
From Nuxt.js official documentation: https://nuxtjs.org/faq/webpack-audio-files/
export default {
build: {
extend (config, ctx) {
config.module.rules.push({
test: /\.(ogg|mp3|wav|mpe?g)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
})
}
}
}
Normally, you just have to use the file-loader in your webpack config :
{
test: /\.mp3$/,
include: '/path/to/directory',
loader: 'file-loader'
}
Can you share your config file ?
Instead of import directly in javascript, I recommend you to load your file with a generic resource loader.
Related
Attempting to load SCSS files from the relative path within Vue component fails.
Config details:
Using "mochapack": "^2.1.2",
Using "sass-loader": "^10.2.0",
Using
$ node -v
v14.17.0
webpack.config-test.js:
const nodeExternals = require('webpack-node-externals');
const { VueLoaderPlugin } = require('vue-loader');
const { alias } = require('./webpack.config.js'); // webpack.config.js is our main, this config is for testing.
module.exports = {
target: 'node', // webpack should compile node compatible code
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
},
'resolve-url-loader',
'sass-loader',
]
}
]
},
resolve: {
alias: {
...alias
},
extensions: ['.js', '.vue']
},
plugins: [
new VueLoaderPlugin(),
]
};
As you can see, attempting to use URL rewriting per webpack recommendation still fails.
Error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
126 │ #forward "../settings.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
Debugging attempts:
Checked settings.scss for errors, even when the file is empty it still can't find it.
It def has something to do with the relative path, but the plugin that is supposed to resolve that doesn't seem to work. I'm hoping this is just me not using it right. But I followed their instructions.
I had a similar error, turned out there was a space in the name of a parent directory of the project that was causing the settings.scss to not be found. Try removing the whitespace from all parent directories.
I need to extend the CSS Loader for Nuxt.js so I can use modules within my global .scss files in assets/scss/screen.scss.
This is taken from the Vue.js site.
// webpack.config.js
{
module: {
rules: [
// ... other rules omitted
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// enable CSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
Problem is I don't know where to put this in my Nuxt.config.js for what I have tried fails.
If I place here:
build: {
extend(...){
config.module.rules.push({
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// enable CSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]--[hash:base64:8]'
}
}
]
});
}
}
It throws
Error: Cannot read property 'forEach' of undefined at at node_modules\#nuxtjs\style-resources\lib\module.js:88:18
I am confused because I am already extending it successfully in my nuxt.config.js to allow for CSS modules INSIDE of each component.
loaders: {
cssModules: {
modules: {
localIdentName: process.env.NODE_ENV === "production"
? "[hash:base64:6]"
: "[local]--[hash:base64:6]"
}
}
},
But I can't call a CSS class as a module from my main 'global' stylesheet. No error, it just can't find it.
/assets/scss/screen.scss
.triangle{
background:red;
}
Can't be linked-to in my Nuxt file as
<div :class="$style.triangle"></div>
Just like it can if I add the CSS directly within my module. I wonder why I can't access CSS Modules this way? But I can if it's directly within a component using
<style module lang="scss"></style>
Am I able to use CSS modules from a main global stylesheet?
I am facing problems using SASS by it's indented syntax, since the documentation is only describing a way to configure storybook for sassy css syntax (which I don't want to use) - is there also a workaround for using the original SASS Syntax instead? I looked around the internet and could not find any information about that issue...
My current webpack/main.js config is looking like this (not working):
const path = require('path');
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['#storybook/addon-actions', '#storybook/addon-links'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.sass$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
sassOptions: {
indentedSyntax: true
}
}
}
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
Got it solved!
The problem was a conflict accured throught suing "indentedSyntax: true," which should only be used fpr older sass-loader versions (<8). Since I am using 8.x "indentedSyntax: true," should be placed within the sassOptions object...
Anyways, since I did not found any information related to that topic I will post the solution in here: Just add the webpack configuration to your .storybook/main.js, so you can use SASS within your storybook.
const path = require('path');
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['#storybook/addon-actions', '#storybook/addon-links'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.sass$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
indentedSyntax: true
}
}
}
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
I'm creating a project in Rails with vue, for this I'm working with webpack, what happens and my text editor, atom IDE, does not process the .vue files, I've tried the steps that the documentation recommends, but I do not know what I'm doing wrong
I provided loading the vue-loader by npm, but I still can not see the .vue files in my project, then I did it by configuring in the webpack.config.js file, and nothing. Then I leave the links of the things I did that did not work.
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import OptimizeCssAssetsPlugin from '../../../src/';
module.exports = {
entry: './index',
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: { loader: 'style-loader' },
use: {
loader: 'css-loader',
options: { minimize: true }
}
},
vue: {
loaders: {
sass: 'style!css!sass?indentedSyntax',
scss: 'style!css!sass'
}
},
plugins: [
new ExtractTextPlugin('file.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /optimize-me\.css/g
})
};
I hope to be able to work the .vue files
I use MiniCssExtractPlugin in a project which has some problem when I import css file inside node modules in a vue file. Import statement:
import '../../../node_modules/video.js/dist/video-js.css
Webpack config:
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { url: false }
}
]
}
No style has been applied using the above setting. I tried to create a test.css file and put around in different folder. All directory will work except inside node_modules folder. Please help.
Extra info:
If I replace MiniCssExtractPlugin with style-loader, everything will be ok.
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: { url: false }
}
]
}