In my index.html file I have some styles like this
.some-thing {
background-image: url('/logo.svg');
}
the logo.svg is in folder /static and vite.config.js hase
publicDir: 'static',
It works fine on yarn dev' but on yarn build` the above code is converted to
.some-thing {
background-image: url('__VITE_PUBLIC_ASSET__cc0131c0__');
}
and in console I see error VITE_PUBLIC_ASSET__cc0131c0 could not be loaded 404.
Related
Into a Symfony5 project I use VueJS framework with SFC (Single File Component).
Into my components VueJS style part I need to use "url" css rule with file path definition.
In particulary for background-image design div like this :
<style lang="scss" scoped>
#presentation
{
height: 800px;
width: 100%;
background-image: url('/build/images/presentation.jpg');
}
</style>
My webpack configuration seems to be good for serve public directory because my image is available in my browser with this url : "https://mydomain/build/images/presentation.jpg"
But when I run : npm run dev
for launching webpack encore dev, the process throw error and tell that :
Module build failed (from ./node_modules/#symfony/webpack-encore/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/build/images/presentation.jpg' in '/var/www/myproject/assets/components'
Webpack encore config :
const Encore = require('#symfony/webpack-encore');
const webpack = require('webpack');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVueLoader()
.addEntry('app', './assets/app.js')
.addEntry('index', './assets/index.js')
.addLoader({
test: /\.(jpg|png|svg|gif)$/,
type: 'asset/resource',
})
.enableStimulusBridge('./assets/controllers.json')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('#babel/plugin-proposal-class-properties');
})
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.addPlugin(new webpack.DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: true
}))
.enableSassLoader()
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[ext]',
pattern: /\.(png|jpg|jpeg)$/
})
;
module.exports = Encore.getWebpackConfig();
I checked my public web server directory which target my public directory project index symfony very well
I try lot of things of path but the same error throw
Is there css-loader or vue-loader which throw or config error ?
How can I correctly "loading" file path into style part of component VueJS ?
I need custom rules config of vue-loader or css-loader ?
My technical context do not help me to easily understand what is wrong.
Because one component VueJS is used by Storybook AND Symfony with 2 differents webpack config.
But I solve my issue thank to 2 thinks :
first for symfony part : use the ~ character into begin of my url resource file
background-image: url('~/assets/images/lopitofuritarus.jpg')
second for storybook part : do not use file-loader with css-loader
test: /.(png|jpe?g|gif)$/i,
use: [{loader: 'file-loader'}],
Perhaps it can help someone...
I want to import a SCSS file in my Nuxt project.
For this I tried to follow the documentation where I simply add the path with filename in css file as:
nuxt.config.js
css: ['#/scss/_introPage.scss]
But it gives error as
Cannot find module '../scss/_introPage.scss'
My folder structure:
> components
> pages
> scss > _introPage.scss
> static
> store
> test
> nuxt.config.js
> package.json
How can I include the SCSS file and apply the global CSS into my project?
If anyone needs any further information please let me know.
Thank you everyone for your input.
I had to install sass, sass-loader#10 and fibers for it to work.
nom install --save-dev sass sass-loader#10 fibers
Nuxt.js provides a good way to share global CSS files with a css option in nuxt.config.js
example:
// nuxt.config.js
export default {
// other options
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
],
// other options
}
in your case, you need to add sass and sass-loader to load sass, scss, less &... files in your projects.
SASS: yarn add sass-loader sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus
to share your global style files(scss, sass, & ... ) and other good features
you can use Nuxt Style Resources.
Share variables, mixins, functions across all style files (no #import
needed)
Add #nuxtjs/style-resources dependency using yarn or npm to your project with on of these commands:
yarn add -D #nuxtjs/style-resources or npm install --save-dev #nuxtjs/style-resources
and then you can add '#nuxtjs/style-resources' in buildModules option in nuxt.config.js file import your global scss files like this:
// nuxt.config.js
export default {
// other options
buildModules: [
'#nuxtjs/style-resources',
],
styleResources: {
// your settings here
scss: ['#/assets/scss/_introPage.scss'],
sass: [],
less: [],
stylus: [],
hoistUseStatements: true // Hoists the "#use" imports. Applies only
to "sass", "scss" and "less". Default: false.
}
// other options
}
for more information see this link https://www.npmjs.com/package/#nuxtjs/style-resources
I've created a Nuxt app with Bulma included and would like to access/override the Bulma variables in my .vue files. I've followed the instructions here which seem to match what I found in several other locations but I'm still getting an error when trying to access the $primary variable in my .vue file.
Here's my assets/css/main.scss file:
#import "~bulma/sass/utilities/_all.sass";
#import "~bulma/bulma";
My nuxt.config.js modules section:
modules: [
['nuxt-sass-resources-loader', './assets/css/main.scss']
],
And my .vue file:
<template>
<section class="container">
<div class="my-title">
About
</div>
</section>
</template>
<script>
export default {
};
</script>
<style lang="scss">
.my-title {
color: $primary;
}
</style>
Here's the error message in the terminal:
Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 11:51:52
color: $primary;
^
Undefined variable: "$primary".
in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
friendly-errors 11:51:52
# ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
# ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
# ./pages/about/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
Can anyone see what I'm doing wrong?
UPDATE: I've narrowed it down to the nuxt.config.js modules setup by importing the .scss directly in the .vue file. This works which tell me the imports in the main.scss the file is working fine.
Okay, I wasn't able to get it working with nuxt-sass-resources-loader but I did get it working with style-resources-module from here https://github.com/nuxt-community/style-resources-module. Once I installed style-resources-module, I just added it to my nuxt.config.js modules section and added the appropriate styleResources section as follows:
modules: [
'#nuxtjs/style-resources'
],
styleResources: {
scss: [
'./assets/css/main.scss'
]
},
This config options provides to load any scss/sass file that specified by you before other files via webpack. You can interfere webpack config via these options that provide by nuxt. To experience more sass loader configuration you can check webpack sass loader section.
Don't forget install node-sass and sass-loader to use sass/scss file
in your app as mentioned by nuxt documentation.
// nuxt.config.js
build: {
loaders: {
sass: {
prependData: "#import '~bulma/sass/utilities/_all.sass;",
}
}
}
I created a vue.config.js file to set some global sass variables (just like the documentation specifies), however when trying to access the variables in a component, I get an undefined error. Adding the same import statement manually in the component works, but somehow it's not being picked up from inside the vue.config.js file. I checked that I have node-sass and sass-loader installed and that the vue.config.js is in the project root (next to the package.json). What am I missing?
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/assets/styles/_variables.scss";
`
}
}
}
}
Change data to prependData
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "#/assets/styles/_variables.scss";
`
}
}
}
}
You can read more about this here: pre-loader docs
this code is for vue3
install:
Sass
npm install -D sass-loader#^10 sass
fibers
npm install -D fibers
Style Resources Loader
npm i style-resources-loader -D
in your vue.config.js (root level project)
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/assets/styles/scss/_variables.scss";
`
}
}
}
}enter image description here
symbol # means that your file start from src folder
npm install --save-dev node-sass sass-loader
Create file 'vue.config.js' in the root
Add code below. Remember - # refers to /src folder
module.exports = {
css: {
loaderOptions: {
sass: {
data: '#import "#/assets/css/variables/_colors.scss";'
}
}
}
}
Restart the project
It's hard to troubleshoot without the full context, so here are several options you can try:
Ensure you've restarted the dev environment since changing the config (re-run yarn dev or npm run dev)
Keep the template literal to one line, as is used in docs. This shouldn't make a difference, but it might. (e.g. data: `#import "#/assets/styles/_variables.scss";`)
As you probably know, the underscore in front of a sass file denotes a sass partial. A partial is not used in the example, so it is possible that this has an effect as well. (e.g. rename _variables.scss to variables.scss and use data: `#import "#/assets/styles/variables.scss";`)
Ensure that the sass-loader, node-sass, and css-loader packages are up to date.
Try using the path without the slash after the #. e.g. #assets/styles/_variables.scss.
Try with a ~ instead of the #. e.g. ~assets/styles/_variables.scss. If nothing else has worked, try replacing the # with src as well.
Good luck!
I've a folder some scss-files under src/assets/scss and I want to accomplish, that my src/assets/scss/main.scss is watched and compiled during npm run serve and npm run build.
The compiled file should be placed in public or in dist, I don't know what the better solution is. I've tried to add an output-directory to my vue.config.js but nothing worked.
This is my current vue.config.js:
module.exports = {
css: {
loaderOptions: {
sass: {
data: '#import "#/assets/scss/main.scss";',
outputDir: './public/css/main.css'
}
}
}
}
The styles from main.scss will not be loaded in a vue-component. These styles will be loaded globally for the whole website.