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 }
}
]
}
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.
Need help. An error occurs during import:
By default, JavaScript assumes imports without a file extension to end in .js
So you're looking for a file at './src/pages/HomeContainer.js'
This file doesn't exist.
Changing the file extension of HomeContainer to .js will fix the issue or by changing your imports to include the .jsx file extension.
import React from 'react';
import HomeContainer from '.src/pages/HomeContainer.jsx';
If you don't want to add .jsx on your import you could add resolve: { extensions: ['.js', '.jsx'] } to your webpack.config.
(From Francesco Orsi's answer https://stackoverflow.com/a/62638083/15067557)
// ...
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
// loader: 'babel',
loader: 'babel-loader',
query: {
presets: ["react", "es2015"],
plugins: ["transform-class-properties"]
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
resolve: {
extensions: ['.js', '.jsx']
}
// ...
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 am trying to use the following code in my vue.config.js file, but it is giving me errors that module is not allowed. I am aware that there are configureWebpack and chainWebpack options, but I have no idea how to convert the following to use them. Any help would be appreciated
var path = require('path');
module.exports = {
foo:{},
bar{},
// Putting module in here does not work
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve(__dirname, "./node_modules/#syncfusion")
]
}
}
]
}
}
}
]
}
}
and in my vue file
<style lang="scss">
#import 'subfolder-inside-syncfusion/some-file.scss';
</style>
Link to code I found:
https://www.syncfusion.com/forums/139116/scss-files-when-included-in-my-file-doesnt-work-as-expected
You dont have to tap into the webpack config, if all you need is to include a global SCSS file. To import #syncfusion from node_modules, you can setup your vue.config.js like so:
css: {
loaderOptions: {
sass: {
data: `#import "~#syncfusion";`
}
}
}
For more info, see the Vue docs "Working with CSS".
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.