this is tailwind.config.js
module.exports = {
// webpack is building into dist
content: ["./dist/*.html"],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
this is postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: ["postcss-preset-env", tailwindcss],
};
this is webpack.config.js
module.exports = {
mode: "development",
target: "web",
entry: ["regenerator-runtime/runtime", "./src/index.js"],
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
publicPath: "/",
},
resolve: {
extensions: [".js", ".css"],
alias: {
components: path.resolve(__dirname, "src/components"),
},
},
devtool: "eval",
module: {
rules: [
{ test: /\.(js|jsx)/, loader: "babel-loader", exclude: /node_modules/ },
{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
{
test: /\.(woff(2)?|ttf|eot|jpg|jpeg|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[contenthash].[ext]",
outputPath: "fonts/",
}, }, ], },
],
},
devServer: {
static: {
directory: path.resolve(__dirname, "dist"),
},
historyApiFallback: true,
},
plugins: [ ],
};
this is index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
// for testing to see if this page is loading. color is set correctly
body {
color: green;
}
tailwind is still not loading
the issue was with the tailwind.config.js. It should be like this
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Related
I'm trying to put an image as background in a div but it doesn't recognize it because webpack changes the path to http://localhost:8080/gaia.png instead of http://localhost:8080/assets/images/gaia.png
The image is displayed correctly inside an tag but it doesn't load if I want to use it from the Css file.
I'm sure the problem is the file path but I don't know how to fix it.
index.js
import './assets/style/style.css'
import './assets/images/gaia.png'
import './assets/fonts/CascadiaCode.ttf'
const fun = () => {
console.log('hey')
}
fun();
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html')
})
],
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: '[name][ext][query]',
outputPath: 'assets/images/',
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: '[name][ext][query]',
outputPath: 'assets/fonts/',
},
},
],
},
};
style.css
.container {
width: 300px;
height: 300px;
background-image: url("../images/gaia.png");
background-size: auto;
}
delete outputpath and set it up as :
generator: {
filename: 'assets/images/[hash][ext][query]'
}
}
I fixed the problem by installing a specific loader for Html images
npm install --save-dev html-loader image-webpack-loader
I followed this tutorial: Optimizing Static HTML And Images With Webpack
Here is my webpackconfig.js file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html'),
}),
],
module: {
rules: [
{
test: /\.css/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.html$/i,
use: 'html-loader',
},
{
test: /\.(png|jpg)$/i,
type: 'asset/resource',
generator: {
filename: 'images/[name]-[hash][ext]',
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name]-[hash][ext]',
},
},
],
},
};
I also created a Webpack Template that you can use with the default configuration on my GitHub:
Webpack Template Repo
I use webpack to compile scss. The scss also contains url to svg files, which I need to process and link to css with correct url.
However, instead of a valid svg, I get a file (eebc108eb2b00c4b2784.svg) with the following content:
module.exports = "data:image/svg+xml,%3csvg width='30px' height='30px' xmlns=...'
which is linked to css like:
background-image: url(../eebc108eb2b00c4b2784.svg);
That is what i want basically, but svg obviously dont show. This SVG is not used anywhere in JS only in CSS.
My webpack config looks like this:
const webpack = require("webpack");
const path = require("path");
const AssetsPlugin = require("assets-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
let config = {
watch: true,
entry: {
appAdmHomepage: "./_devapp/AppAdmHomepage.js",
cssStyle: "../css/primary/style.scss",
cssAdm: "../css/primary/administrace.scss",
cssPrint: "../css/primary/print.scss",
cssObjProces: "../css/primary/objednavkovy_proces.scss",
cssDesign: "../css/primary/design.scss",
},
output: {
filename: "[name].bundle.js",
chunkFilename: "[name].[contenthash].js",
path: path.resolve(__dirname, "assets", "bundle")
},
resolve: {
extensions: [".js", ".jsx", ".json", ".ts", ".tsx", ".css", ".scss"]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: path.resolve(__dirname, "node_modules"),
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-env",
["#babel/preset-react",{
"runtime": "automatic"
}]
],
plugins : [
["#babel/plugin-proposal-decorators", { version: "legacy" }],
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods",
]
}
},
}, {
test: /\.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
name: "./image/[name]--.[ext]"
},
},
],
}, {
test: /\.scss$/,
include: [
path.resolve(__dirname, "../css/primary/")
],
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: true,
import: true
}
},
"sass-loader"
]
}, {
test: /\.css$/, //pro datepicker
use: [
"style-loader",
{
loader: "css-loader",
options: {
url: true
}
}
]
}
],
},
plugins: [
new webpack.DefinePlugin({
"__DEV__" : JSON.stringify(true),
"__API_HOST__" : JSON.stringify("http://127.0.0.1:8080/www/eshop/www"),
"__PATH_HOST__" : JSON.stringify("/www/eshop/www"),
}),
new AssetsPlugin({
prettyPrint: true,
removeFullPathAutoPrefix: true,
fullPath: true
}),
new MiniCssExtractPlugin({
filename: "./css/[name].min.css"
}),
new CleanWebpackPlugin()
]
};
module.exports = config;
Is there a way to link correct form of SVG or am i making a mistake somewhere? Thanks for help
I am using Next css modules (sass). I tried every solutions I've encountered but I still cannot get it working.
My problem is, when I run the storybook, the css doesn't compile #apply method from tailwind. There is a simple solution which is remove the #apply and use the classname directly to the element but I don't have the time to do because the application is too big at this point.
// main.js
const path = require('path');
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.#(js|jsx|ts|tsx)',
],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions',
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
postcssOptions: {
plugins: [require.resolve('tailwindcss')],
},
implementation: require('postcss'),
},
},
},
],
framework: '#storybook/react',
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.sass$/,
use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
output in storybook
Any help would be appreciated
I managed to make it work by using this config.
.storybook/main.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.#(js|jsx|ts|tsx)',
],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions',
'storybook-addon-next-router',
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
postcssOptions: {
plugins: [require.resolve('tailwindcss')],
},
implementation: require('postcss'),
},
},
},
],
framework: '#storybook/react',
webpackFinal: async (config) => {
config.resolve.plugins.push(new TsconfigPathsPlugin());
config.module.rules.push({
test: /\.sass$/,
use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
.storybook/preview.js
import '../styles/globals.css';
import { RouterContext } from 'next/dist/shared/lib/router-context';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
nextRouter: {
Provider: RouterContext.Provider,
},
};
In global.css, I imported the tailwind utilities
global.css
#tailwind base;
#tailwind components;
#tailwind utilities;
I'm using Bootstrap with webpack, but when I run my app, no Bootstrap and no CSS is applied.
This is my webpack.config.js :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '',
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, './build'),
compress: true,
port: 3000
},
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader",
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
},
//remove comments from JS files
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new ManifestPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve('./public/index.html'),
}),
]
};
I have this kind of error in brower console :
Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(192:1) Unknown word
I don't have an idea where this error comes from.
Below two versions of dev/prod and all the code you can see here webpack-boilerplate
Dev:
{
test: /\.(css|sass|scss)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
}
],
},
Prod:
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
I coded my site using Webpack. Everything works except the image's path. I'm used to write ../img/test.png for it work. I've researched other questions but none work.
My files are organized inside the dist folder of the wordpress theme.
Here's my webpack.config.js :
module.exports = {
mode: 'development',
entry: [
'./src/index.js'
],
devtool: "source-map", // any "source-map"-like devtool is possible
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module:{
rules:[
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test:/\.(s*)css$/,
use: [{
loader: "style-loader", options: {
sourceMap: true
}
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "resolve-url-loader", //resolve-url-loader needs to come *BEFORE* sass-loader
options: {
sourceMap: true
}
},{
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
plugins: [
new CopyWebpackPlugin([
{from:'assets/images',to:'images'}
])
],
watch: true,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
I've tried other url-loaders but nothing seems to work. Thanks in advance.
I figured it out. The public and output path were the most important things I had to learn. Since this was with Wordpress, the other answers weren't sufficient. The new config looks like:
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: [
'./src/index.js'
],
devtool: "source-map", // any "source-map"-like devtool is possible
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module:{
rules:[
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images',
publicPath: 'wp-content/themes/{{ THEME NAME }}/dist/images',
},
},
],
},
{
test:/\.(s*)css$/,
use: [{
loader: "style-loader", options: {
sourceMap: true
}
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
watch: true,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
Hope this helps for anyone who is working through this.