Override path resolve for css bundling in webpack - javascript

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?

Related

loading all css files from 'assets' directory in NUXT

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'],

Webpack watch file changes and trigger loader for other files

I'm looking for a way to watch changes on files (sass files precisely) and execute a loader on other files (js files) with webpack.
The goal is to detect sass changes and recompiling all the javascript files with the babel-loader, because they might import it through the styled-jsx plugin.
I'm stuck in the "loader" concept and can't figure out how to get other files when testing for /.scss$/
You don't need to do anything by yourself if you using scss modules with webpack (more about module concept in the webpack docs.
What webpack does - it starts at entry point (you can specify one or multiple entrypoints, if you don't, default src/index.js would be used). And then builds dependency trees between modules (which can have any file extension as long as there's a specific loader that can turn file into module). Webpack then watches all files and rebuild all modules that have a dependency on changed file. So, if you import the .scss file in, let's say, your entrypoint
import './styles.scss';
// ...
It would rebuild automatically when styles.scss changes
You need to import your .scss file(s) under one of your .js files so that webpack actually picks up the changes.
Then, all loaders you have configured will be applied automatically based on which file type they should target.

EmberJs - how/where does the addon.scss file in an add-on gets mapped into the consuming app

I have a custom made add-on in a directory outside of the host application's directory. Then, importing the add-on via the package.json file by providing the relative path under the ember-addons object, in
paths : [ '<relative path>']
I have provided the styles for the components in the add-on under addon/styles/addon.scss. I am using foundation for the styles in the components, so my addon.scss has some #import and the imported files have #import statements which are sourced from bower_component/foundation/*
This setup works fine while serving the dummy app in the add-on. But fails to successfully build the consuming app with the add-on included. Failing at the #import statements of the foundation styles in the app.. although bower_components in the consuming app has the foundation module with respective files in place.
Thanks in advance!
Are you importing the file into your app.scss file? e.g.
#import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
If you import it there it will compile and include when you are doing a build.
Pete

Stylus imports styl files from the wrong folder

I have a file mobile.styl that collects all styl files I need via #import:
#import '../../common/styles/colors'
#import '../../common/styles/init'
#import 'landing'
#import 'faq'
#import 'vehicle'
I have two 'landing' styl files, one is in current folder where mobile.styl is and another is where those two first imported files are ../../common/styles/.
If I have the order of imports like shown above, then stylus imports first colors and init files which is fine, but then it loads landing file NOT from current folder where mobile.styl is, but from ../../common/styles/ so I get the wrong styl file, which is for desktop version.
Now, if I put those two imports to the end of the file, then it first loads landing, faq, vehicle properly, then those two files from the proper paths as expected.
Is this a bug or intended behaviour?
I've dealt with this same issue. A few solutions I've found are:
Rename one of the files to something unique.
change landing.styl to landing-mobile.styl
Move the file you want to import into it's own folder
move landing.styl to mobile/landing.styl
Import a file from the folder root you want to be in before importing the file of the same name
import empty.styl that lives next to landing.styl then import landing.styl
Lastly, you can reference the path relative to the last file imported
import ../../landing.styl
I've placed the options in order of my personal preference, but they all should do the trick.

using requirejs optimizer to minify to a single javascript and single css

I am writing jQuery plugin and using requirejs in order to make my plugin modular and easier to code.
The plugin has also its own css files. Now, I want to combine and minify all the js files and css files. I am using r.js to so it. Here is the build.js configuration file that knows how to concatenate and minify js files into one file:
({
baseUrl: 'js/plugin',
optimize: 'none', // none, uglify or uglify2
wrap: true,
name: '../vendor/almond',
include: 'main',
out: '../dist/jquery.my-plugin.min.js'
})
How can I add an option to minify also css file? I saw the cssIn option, but where do I tells r.js wha is the output name? Do I need to use modules? If so, how?
r.js automatically inlines contents of #import url(...) links in all .css files found in the project directory (thus concatenating multiple files into one master stylesheet).
In your current build configuration, however, with only baseUrl specified, r.js doesn't even know about the CSS folder (which is, presumably, somewhere in ../../style/ relative to js/plugin/).
You'd have to add the appDir and dir properties to your buildconfig file (both explained in detail in the example config file) and set project root (ie. appDir) to directory that contains both JS and CSS folders.
Please note that, as mentioned in the documentation, adding appDir will require changing value of baseUrl to be relative to appDir.

Categories

Resources