I'm trying meteor to build a prototype using react+webpack+react-toolbox, according to the react-toolbox docs in order to theme the components i should create a scss file with the overrides and prepend it to every stylesheet using this:
sassLoader: {
data: '#import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
}
the thing is that meteor webpack uses a webpack.json instead of the regular webpack config file
how should i use that code in the json file ? or should i create anyway a regular webpack.config and add those lines ??
any help will be appreciated
John.
Related
I have a React project with webpack (own configuration), from which I need to generate different packages with different styles. It would always be the same application, only in each package it generates, it would need a particular css file to end up in the package.
For example, in the repository I would have different css files:
- src
- index.js
- index.html
- themes
- theme1
theme1.css
- theme2
theme2.css
- theme3
theme3.css
and when I build it should look like this: (in "build" folder)
- build
index.html
main.css // with the styles of theme2, for example
bundle.js
I don't know how to do this with webpack or which plugin, hope you help me.
Thanks
You can get multiple separate CSS by adding multiple entries in your configuration.
Example:
webpack.config.js
module.exports = {
entry: {
main: "./path/to/your_main.js",
"css-theme-1": "./path/to/your/theme.css",
"css-theme-2": "./path/to/your/another-theme.css",
}
}
Also, you can build it into a folder by configuring filename properties in mini-css-extract-plugin.
Further reading:
Webpack Code Splitting
Background
#angular-builders/custom-webpack allows us to customize the webpack config of angular build, tutorial here. I am using it to build the additional scripts for web extension (Chrome/Firefox).
Here is the extra.webpack.config.js that I have included in angular.json
const { resolve } = require('path');
const scriptsDir = __dirname;
module.exports = {
entry: {
"background-script": resolve(scriptsDir, 'background-script/boot.ts'),
"fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
"site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
}
};
As expected it outputs background-script.js, fill-manager.js and site-bridge.js alongside angular build artifacts. As this webpack config is merged with the angular's webpack config, we can control all the optimizations, hashing, source maps etc from a single angular.json file.
Problem
I also want to bundle additional css files that would be used with extension scripts and be controlled by angular build.
I might be able to add specific rules, loaders etc to extra.webpack.config.js but I do not want to deal with postcss, autoprefixer and sass loaders etc as its already being done inside angular.
Just like script files, simply adding css entry inside extra.webpack.config.js does not produce css file i.e.
module.exports = {
entry: {
...
"fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
...
}
};
Is there a way where I can specify a css/scss file entry in extra.webpack.config.js and it just output a bundled css file using configuration based on angular?
I'm building a small web app with Webpack-enabled CSS modules (via css-loader) and without React. My goal is to get the benefits of short, obfuscated CSS class names (as I'm currently using lengthy BEM class names) in my HTML by using the localIdentName: '[hash:base64:8]' option on css-loader. Since I'm not using React, I'm working with raw HTML that is not being programmatically generated through JSX file or document.write.
I've used css-loader with React plenty before, and it ultimately works because you're able to import the style class names in the React file and refer to them using the human-readable names, regardless of whatever the class name gets changed to by Webpack.
However, I'm confused how to deal with this when using raw HTML; I can't just import the styles in since it's not a JS file. If I have a class called photo__caption--large referenced in my HTML, and webpack converts the class name to d87sj, the CSS file will say d87sj but the HTML will still say photo__caption--large.
Is there some kind of loader for HTML files that's able to edit class names in the file to their Webpackified equivalents? Or should I really just be using React with CSS modules?
This github code might help you.
https://github.com/moorthy-g/css-module-for-raw-html
A bit of complicated setup needed. We need to wire the following packages together.
- postcss-loader
- postcss-modules
- posthtml-css-modules
- posthtml-loader
The following postcss configuration creates modules dump file (./tmp/module-data.json).
// postcss.config.js
module.exports = {
plugins: {
'postcss-modules': {
getJSON: function(cssFileName, json) {
const path = require('path'), fs = require('fs');
const moduleFile = path.resolve('./tmp/module-data.json');
const cssName = path.basename(cssFileName, '.css');
const moduleData = fs.existsSync(moduleFile) ? require(moduleFile) : {};
moduleData[cssName] = json;
fs.existsSync('./tmp') || fs.mkdirSync('./tmp');
fs.writeFileSync(moduleFile, JSON.stringify(moduleData));
},
generateScopedName: '[local]_[hash:base64:5]'
}
}
}
And the following webpack rule links html file to modules dump file.
{
test: /\.html$/,
use: [
{ loader: 'html-loader' },
{
loader: 'posthtml-loader',
options: {
plugins: [
require('posthtml-css-modules')('./tmp/module-data.json')
]
}
}
]
}
Finally, HTML uses css-module attribute instead of class
<div css-module="main.container">
<h2 css-module="main.title">Title for the page</h2>
</div>
Let me know if you have any issues
My understanding of Webpack, CSS Modules, & CSS-Loader is that the entire point is to use javascript to generate the files.
This enables all the name translation and what not. What's your goal with Webpack if you're writing static HTML?
There are several static site generators for Webpack that will allow you to get the result you want, BUT they're still building the HTML files.
Alternately you could look at tools similar to React (Vue or Angular) that allow you to write all your "templates" in straight HTML. In Vue for example, you can write only HTML (to be compiled from javascript) without needing to use any of its data binding or routing.
I want to use materializecss in my chrome extension.
The extension adds some functionality to gmail. Unfortunately the materializecss seems to interfere with the gmail stylings. Is it possible to isolate the scope of the materialize css or to add a custom prefix to the classes?
I currently import the css in my manifest.json
"content_scripts": [
{
"matches": ["*://mail.google.com/*"],
"css": [
"vendor/materializecss/materialize.min.css"
],
...
Not without rewriting the whole framework (the scss files) or using scoped stlyes.
There is gulp-class-prefix plugin to prefix CSS classes. Here is the configuration file
var gulp = require('gulp'),
classPrefix = require('gulp-class-prefix');
gulp.task('prefix', function () {
return gulp.src('SOURCE_OF_CSS_FILE')
.pipe(classPrefix('YOUR_PREFIX'))
.pipe(gulp.dest('DESTINASTION_FOLDER'));
});
gulp.task('default', ['prefix']);
but this will only prefix only CSS file and will work only for the components that do not need JS inclusion. For dynamic components, you need to make changes in materiazecss.js file.
Update
I got this python script. This script is designed for bootstrap. But anyhow this works(70%-80%) for materializecss too. You just need to change the file name in the main function of it ie replace bootstrap with materializecss.
I am using Laravel 5.1 with Elixir: Laravel Elixir Documentation
If you use Compass to compile Sass code, the resulting CSS file has comments above each selector that gives the line number of the code in the .scss file, as shown below:
When using the standard Elixir gulpfile.js to compile a Sass file (app.scss), a sourcemap is generated in the public/css folder, however I am unable to get the line numbers in the comments as shown in the screenshot.
Is this possible when using Gulp?
Finally, I did.
1- Create an elixir.json file within your project root(according to laravel elixir).
2- Insert the below config:
{
"css": {
"sass": {
"pluginOptions": {
"sourceComments": true
}
}
}
}
The Laravel Elixir uses node-sass plugin which has an option(sourcecomments) for adding line number and file name to the your compiled css file.
I hope this can help you.