I want to import a .css
file in my app.jsx which has some theme specific code, but then my components are styled using scss files.
How can I do that? Here is my webpack config which works only for scss files, I thought i could put a wildcard and it'd work for both.
test: /\.(s?)css$/,
use: [
{
loader: 'style-loader',
options: {
hmr: true
}
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'sass-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
}
}
]
SCSS syntax is CSS compatible, so you just have to rename your . css file to . scss et voilà! Your first SCSS file has been created, just like that.
sass-loader is a loader for Webpack for compiling SCSS/Sass files. style-loader injects our styles into our DOM. css-loader interprets @import and @url() and resolves them. mini-css-extract-plugin extracts our CSS out of the JavaScript bundle into a separate file, essential for production builds.
By default, Webpack will inline your CSS as Javascript tags that injects the CSS into the page. This sounds strange but it lets you do hot reloading in development. In production you extract them to a file using the ExtractTextPlugin, and require it with a normal link tag.
To be able to use CSS in your webpack app, you need to set up a new loader. Out-of-the-box, webpack only understands Javascript and JSON. With a loader, you can translate another type of file to a format that webpack understands and can work with. There are many webpack loaders and each loader has a specific purpose.
Try this. I have tested it. Worked well for me.
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: 'style-loader',
options: {
hmr: true
}
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer({ browsers: ['> 1%'] })]
},
},
'sass-loader'
],
}
Also small advice: don't use 'last 3 versions' like this: plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
it will include a lot of dead browsers. Check it here.
'> 1%'
is better
You can write different rules for css and scss files where u can remove sass loader for css files.
test: /\.scss$/,
use: [
{
loader: 'style-loader',
options: {
hmr: true
}
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'sass-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
}
}
]
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
hmr: true
}
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
//removed sass loader
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
}
}
]
Below is my personal setup for css & scss files
webpack.config.js
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 3,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
postcss.config.js
module.exports = {
plugins: [
require('postcss-cssnext')({
warnForDuplicates: false,
features: {
customProperties: false,
},
}),
require('postcss-flexbugs-fixes')(),
process.env.NODE_ENV === 'production'
? require('cssnano')({
preset: 'default',
})
: '',
],
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With