I'd like to load a couple of css files from the assets folder in my nuxt project.
currently I'm loading files individually via nuxt.config.js
export default {
head: {
css: [
'~/assets/css/fonts.css'
],
}
}
which works perfectly fine for a single file. is there any way to import all files at once that are in the /assets/css folder?
I suggest you an alternative way that you can import your css or scss files by sass.
Create a folder in your assets called scss : /assets/scss/.
Install import-glob-loader by running this command:
npm install import-glob-loader --save-dev
Create a file in assets/scss/ path call it main.scss.
Open main.scss and add this code on it:
#import "imports/**/*";
Create a folder in assets/scss/ call it imports/ that involves all your css codes.
create your css files in this assets/scss/imports path.
Go to nuxt.config.js and add this code in that file:
css: ['#/assets/scss/main.scss'],
Related
I'm adding package.json files in the main folders of my app to be able to import files easily, for example in constants folder there is a package.json file with {"name":"#constants"} and to import from the folder I use:
import file from '#constants'
This is very convenient, but when using Typescript I don't get error checking, autocomplete... for files imported these way.
I'm trying to import css (and through that, a relative image path) from a node module.
Adding the npm package works fine,
yarn add #claviska/jquery-minicolors
Importing the css works fine,
#import '~#claviska/jquery-minicolors/jquery.minicolors';
But then when I view my site, I get the following webpack error,
Module not found: Error: Can't resolve './jquery.minicolors.png'
This is the offending image path from the css:
.minicolors-sprite {
background-image: url(jquery.minicolors.png);
}
The css, image, and js files are all in the same npm folder:
node_modules/#claviska/jquery-minicolors/jquery.minicolors.css
node_modules/#claviska/jquery-minicolors/jquery.minicolors.png
node_modules/#claviska/jquery-minicolors/jquery.minicolors.js
If I copy that image from /node_modules and paste it into my webpack /css folder then everything works!
How can I teach webpack to load relative image paths from css included in my node_module packages?
Found a reasonable solution to this though there are probably better ones.
Moved my css import from my main scss file src/application.scss
#import '~#claviska/jquery-minicolors/jquery.minicolors';
to my main js file packs/application.js
// Import js
import '#claviska/jquery-minicolors';
// Import css
import '#claviska/jquery-minicolors/jquery.minicolors.css';
It's possible that the js and css imports need to be in the same document in order for webpack to discover the problematic relative image path url(jquery.minicolors.png).
Would love to hear other suggestions.
I am new to angularjs and webpack. I had been working in angularjs with following folder structure:
app
js
app.js
controller.js
service.js
directive.js
routes.js
abc.js
xyz.js
templates
home.html
faq.html
abc.html
xyz.html
bcd.html
assets
css
bootstrap.css
style.css
abc.css
js
bootstrap.js
tether.js
popper.js
wow.js
jquery.js
abc.js
img
a.jpg
b.jpg
font
as.ttf
index.html
package.json
serve.js
I have searched through multiple tutorials but could not find an example that fits my requirement. Can somebody help me bundle using webpack for bundling js in app, js in assets and css in assets.
with node.js you need just to inizialize the project and install webpack
npm init
npm install --save-dev webpack
Then you need just configure the webpack.config.js file.
I suggest you to read the official documentation
Based on the https://github.com/davezuko/react-redux-starter-kit repo which uses Webpack, I'm trying to implement a build process that overwrites *.scss files of the standard build with files from another folder.
/src
/styles
core.scss
_colors.scss
_common.scss
/custom-styles
/skin-1
/styles
_colors.scss
core.scss in this example does #import 'colors' (as seen below) which loads the /src/styles/_colors.scss file.
core.scss:
:global {
#import 'colors';
}
I now want to configure Webpack to first check the /custom-styles/skin-1 folder for the file, and then only if no file was found at the custom location, to fallback to the standard path resolve.
So with the override active:
#import 'colors' would resolve the file /src/custom-styles/skin-1/styles/_colors.scss
#import 'common' would resolve the file /src/styles/_common.scss but first checked if /src/custom-styles/skin-1/styles/_common.scss is available
There is a webpack plugin called path-override-webpack-plugin which can successfully do that for *.js files (https://github.com/jamiehill/path-override-webpack-plugin). But unfortunately it does not override the paths used with #import inside the *.scss files.
How is this behavior achievable?
I'm using RequireJS for my javascript project, and r.js to build one single javascript file for production. This single file (main.js) is then uploaded to a CDN. This all works very fine, but now I'm trying to add i18n support.
The problem is that the location of the i18n file is relative to the main javascript file. So within a module, I would have:
define(['i18n!nls/text'], function(Translation) { });
This all works very fine when I'm developing, but for production the problem is that the translation file is not relative to the main.js file as this is placed in a CDN. I don't want to store the translation file in the CDN, so how do I change the reference to that file in the build process?
I found a solution to my problem.
In the RequireJS config I've added:
requirejs.config({
paths: {
nls: "/js/nls"
}
});
Because the path starts with a slash, RequireJS knows it's not relative. Now the problem I got was that the build would fail, as RequireJS would be looking for default language files in /js/nls. Therefore, I added a symlink from the root of my webserver to the nls directory on the machine.
Had the same issue.
Use baseUrl config
require.config({
baseUrl: '/path_for_not_included_modules/'
});