So currently I have my library split as 2 entrypoints, so in Vite config I'm doing this:
build: {
lib: {
entry: [resolve(__dirname, 'src/entry1.ts'), resolve(__dirname, 'src/entry2.ts')],
name: 'LibraryName',
fileName: '[name]',
},
},
This causes Vite to generate 2 output files - entry1.js and entry2.js, but only single css file - style.css
How can I make Vite generate entry1.css and entry2.css for each entrypoint?
Related
Ive added reveal.js to my rails 7 app and with a little tinkering I can switch between slides, however the transitions (eg, slide or fade) do not work.
In terms of installation:
yarn add reveal.js
application.js
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
let deck = new Reveal({
plugins: [ Markdown ]
})
deck.initialize();
slides html:
<div class="reveal">
<div class="slides">
<section data-transition="slide"><h1>Horizontal 1</h1></section>
<section data-transition="fade"><h1>Horizontal 2</h1></section>
</div>
</div>
What I have done/tried
I dont have any javascript errors in my console so im thinking this might just some issue with the css / the way im importing the css. so far I have tried copying the reveal.scss content (from node_modules) into a file in my assets/stylesheets/reveal.scss with no luck:
Module parse failed: Unexpected character '#' (1:0)
12:31:02 js.1 | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
12:31:02 js.1 | > #use "sass:math";
I also tried commenting out the lines (only 3) that use the math property, however that didnt work for me.
I tried importing the css direction (in assets/stylesheets/application.scss) with:
#import "reveal.js/dist/reveal"
// and
#import "reveal.js/css/reveal"
the file in dist is a .css file, while the other one has the contents that I copied before and showed the same error regarding sass:math.
Next I thought I might not have sass so I did yarn add sass and yarn add node-sass, which also didnt make the transitions work.
Now when I open the demo.html and index.html files (that come with the reveal.js dependency in the node_modules) in a browser tab transitions work seamlessly. Meaning it must have to do with how im importing the css/scss?
EDIT: webpack.config.js
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
}
It looks like you need to install and then add the appropriate loaders to your webpack config. Here is the official webpack documentation. It would look something like this:
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
}
I use Webpack to build file and for Wordpress theme.
My website running via Xampp with address is http://localhost/simple
How can I build webpack -watch to refresh Web address using devServer:
My directories:
- scss
+ base.scss
- src
+ app.js
- public
+ bundle.js
+ style.css
I use devServer like this but it does not automatically refresh:
devServer: {
publicPath: "/",
contentBase: "./public",
hot: true
},
Can you support me for this?
Thank you so much.
You also need webpack to run your development environment.
This 'devServer: hot' only enables webpack's Hot Module Replacement feature. In the webpack documentation it is stated that webpack.HotModuleReplacementPlugin is required to enable hot module replacement.
const webpack = require('webpack');
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
So I am trying to add some css style to my react components but failed.
My webpack.config.js looks like:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, './build');
var APP_DIR = path.resolve(__dirname, './src/client');
const config = {
entry: {
main: APP_DIR + '/index.js'
},
output: {
filename: 'bundle.js',
path: BUILD_DIR,
},
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader?modules=true&camelCase=true"
}]
},
{
test: /\.(jsx|js)?$/,
use: [{
loader: "babel-loader",
options: {
cacheDirectory: true,
presets: ['#babel/preset-react']
}
}]
}
],
}
};
module.exports = config;
My client code folder looks like:
Client
--style
----index.css
--index.js
index.css looks like:
body{
color: #555;
background: #f85032;
margin: 10px 30px;
}
Inside index.js, I am loading the css file using
import css from './style/index.css';
Then I do:
npx webpack
npm start
There's no error message in console output. The webpage shows up but there's no css style. Can someone please help me with this? Thanks!
It appears that if I do some inline css in index.html then it works? Any suggestion why this happens? Thanks!
Change to import './style/index.css'; and see if that works
I am just guessing here, since i can not see your index.js
From your webpack file i can see that you are using css modules.
This means that you can not just assign classes as you would usually do it, but you must get them from the css you imported.
Hence
'<div className="className">'
Becomes
'<div class=Name"' + css.className + '">'
The reason is thay css modules is doing some clever naming to always make the imported css unique to ensure you are not having any global scoping and conflicts (which is what you want with css modules)
UPDATE
I have tried to create a local setup with your webpack config. You can download it here (It is just a zip file).
Unzip and enter folder then run npm install and npm run webpack. You can now open build/index.html and see the result.
Maybe then you can see what you are doing differently?
I am writing a webpage with ReactJS.
I made a css stylesheet to change some bootstrap classes (for my Navbar fonts), added the link to html file, and it did not work. Then I installed style loaders and edited webpack.config file, but again server can't load css file. See below my webpack.config code .
var path = require("path");
var webpack = require('webpack');
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
},
{
test: /\.css?/,
loader: "style-loader!css-loader",
include: SRC_DIR
}
]
}
};
module.exports = config;
Having a link such as <link rel="stylesheet" type="text/css" href="/some/path/styles.css"> in your html file does not require a loader in webpack.config.js.
It sounds like you're getting a console error in the browser that says 404 file not found.
If that i the case then the href="/some/path/styles.css" part is not pointing to your file.
Furthermore, I assume, ( I know, dangerous... ) that you are trying to serve your css file from a public folder, and that your server possibly has this folder set as a static asset folder. If that is the case, you do not need to include that folder name in the path you used in the href of your link.
Hope this helps!
All you need to do is explicitly require CSS or Sass dependencies like you would its JS dependencies, and Webpack will build a bundle that includes everything you need. For Example
src/app/index.js
import 'bootstrap/dist/css/bootstrap.css'; //bootstrap installed via npm
import '../css/custom.css'; // just an example path
For more detail explanation Webpack Embedded Stylesheets
I am using grunt connect server for maven angular project. I have some static files outside the angular folder. Is there way to redirect every call for file "redirect_folder/x/y/file.txt" to "target_folder/x/y/file.txt" just grunt need to change redirect_folder word for my static folder path.
Edit:
I copied the user.json to style folder, and trying to make style folder as a base but it doesnt works:
$http.get('user.json')
grunt.js:
grunt.initConfig({
connect: {
all: {
options: {
base: ['/media/data/project/src/main/webapp/resources/ngSrc/app'],
port: 10100,
hostname: "0.0.0.0",
livereload: true,
combine : [ '/media/data/project/src/main/webapp/resources/ngSrc/app', '/media/data/project/src/main/webapp/resources/ngSrc/app/style']
}
}
},
...