I am using styled-components in my project, but it just creates a style tag in the head. Is there any way to export those styles into external stylesheet?
NOTE: I am using Webpack.
You can apply the extract-text-plugin in order to extract the imports into a separate external css file.
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
Related
I use ReactJS with Webpack and TypeScript.
I'm trying to include CSS with React. But my CSS is not use by my React application.
I created a global.d.ts file to declare my css module. I imported my css into my.tsx file but when I add a class to an element, nothing works.
I have already tried to install a css module but I didn't succeed. So, I just made the solution to create a global.d.ts file
global.d.ts :
declare module '*.css';
Hello.tsx
import * as css from './Hello.css';
export interface HelloProps {
compiler: string;
framework: string;
}
export class Hello extends React.Component<HelloProps, {}> {
render() {
return (
<form>
<p className={css.test}> Test </p>
</form>
);
}
}
Hello.css
.test {
color: red;
}
webpack.config.js
module: {
rules: [
.....
{ test: /\.css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader'] }
]
},
The word "test" is written in black.
When it should be in red
This would be due to you not having modules set to true in your css-loader options.
// webpack.config.js
rules: [
{
test: /.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
],
Also, i would just do the following as there's no need for the * import.
import css from './Hello.css'
and then in your jsx:
<Component className={css.test} />
im quite new to react but i think if you remove:
"import * as css from './Hello.css';" And Replace it with "import './Hello.css';"
I'm new with Webpack. Using webpack 4.26.
I was trying to install bootstrap. I'v install it but css styles wasn't build in a separate file. I'v solved this problem and now my config looks like this:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './app/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(png|svg|jpe?g|gif)$/,
exclude: /svg[\/\\]/,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css',
})
]
};
Index.js:
'use strict'
import 'bootstrap';
import './index.scss';
index.scss
#import "~bootstrap/scss/bootstrap";
So now I have a separate file 'style.css' with all bootstrap styles, but, as I understand styles still included to bundle and rendered into tag.
How can I remove it from bundle?
I am developing a web application in angular 5.Now I have included webpack 4 in my application.But There is a problem all styles written in styles.css file are not reflecting in the build created from webpack.
Need solution for this problem.
Below is my webpack.common.js file which is used for loading diffrent types of files present in my application build always succeed but the styles.css code is not reflection on my site when it gets loaded in browser.But code written in components .scss file reflects properly i have searched a lot but did not find any solution for this issue why is is happening.
import styles from './styles.css';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfill': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loader: ['awesome-typescript-loader','angular2-template-loader','angular-router-loader'
],
exclude:[/node_modules/]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/images/[name].[hash].[ext]'
},
{
test: /\.(css|scss)$/,
include: helpers.root('src', 'app'),
loaders: ['css-loader']
},
{
test: /\.js$/,
include: helpers.root('src', 'app'),
loader: 'babel-loader',
exclude:[/node_modules/],
query:{
presets:['es2015']
}
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new ExtractTextPlugin("src/styles.css"),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
You should import your css stylesheet using #import from your main css/scss stylesheet.
Do NOT import a css file as a javascript module from the webpack config file. This has no sense.
I want to use webpack, to compile a style.less file to a module.css file.
I have found https://github.com/webpack-contrib/less-loader as a very popular package, which however does not seem to work for me, since I really need to create that module.css file.
So how can I do that with webpack?
Found the solution myself. The following webpack.config.js snippet works for me:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = function(env) {
return {
...
module: {
loaders: [
{
test: /.*\.less$/,
loader: ExtractTextPlugin.extract({
loader:[ 'css-loader', 'less-loader' ],
fallbackLoader: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({ filename: 'module.css', disable: false, allChunks: true })
]
};
};
Where ... is a placeholder for other parts of the config, which are not relevant here.
I am new to react and i have a project in which i am using bootstrap for css but now i want to load that css and js file from webpack.. I don't know how to load bootstrap files from webpack and how to write the config file of webpack but then also i have tried to load by searching about it..
here is my config file
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index.js',
output: { filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
]
},
};
Please tell me any solution how do i do that?
Thanks a lot in advance.
And what do i import in my index.js file?
i just have my routes there..
import ReactDOM from "react-dom";
ReactDOM.render(
routes ,
document.getElementById("crm")
);
This is one option using Webpack 2 and HtmlWebpackPlugin / ExtractTextPlugin.
Add import './style.css'; (or wherever they are) to your react index.js (Where it says style you could also put bootstrap.min.css and/or other files.
Same for the js files import './jquery.js'; and import './bootstrap.js';.
The stylesheet Link/href will be injected in your index.html and the output css file(s) put in the dist (output.path) dir. The js files will be injected in your bundle.js (check CommonsChunkPlugin (link) to output these and other files in separate .js files.
output.publicPatch is important to make it not only work when index.html is requested directly but also via a route. This makes sure the link to css is added as /style.css not just style.css in index.html.
webpack.config:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
const config = {
entry: {
bundle: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/', <- used by HtmlWebpackPlugin
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
}),
new ExtractTextPlugin("styles.css")
]
}
module.exports = config;
Hope this helps. Let me know.