webpack alias error when import css file - css

I have a webpack alias config like this:
'c-assets': path.resolve(__dirname, './assets/')
and there is a file in assets directory
assets/css/normalize.css
when I use "import" to import the css file using alias
import "c-assets/css/normalize.css";
error occurs:
but when I use "require" to import the file, it works well:
require("c-assets/css/normalize.css")
only css files lead to this problem, why?

Related

Custom font not working on live version of Laravel 9 Website

Problem
So i've got a custom-font.ttf in my public/fonts directory The font loads and works fine on local host.
When deployed to heroku it's throwing a 404 error in console, and i noticed it's trying to access custom-font.ttf in build/assets/fonts/..
relevant part of app.css :
#font-face {
src: url(/fonts/Satoshi-Variable.ttf);
font-family: satoshi;
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
app.js
import './bootstrap';
import '../css/app.css';
Question
How do I make the live site use the font from public/fonts?
Or how do i add the font to vite properly so it includes it in the build folder?

Rather than force the app to look in a different folder, why not put it under your root src directory in a folder called assets? It should pick it up automatically then and put it where it belongs.

Using Vite.js HMR with SCSS in a WordPress theme

I'm trying to use Vite.js in a WordPress theme to process my asset files.
I've created a vite.config.js file:
import { defineConfig } from 'vite';
export default defineConfig({
root: './resources',
build: {
rollupOptions: {
input: ['./resources/test.scss'],
},
},
server: {
port: 1337,
},
});
And I'm loading the Vite.js client plus the asset from the server:
<script type="module" src="http://127.0.0.1:1337/#vite/client"></script>
<link rel="stylesheet" href="http://127.0.0.1:1337/test.css?ver=6.0.1">
But this results in a 404 error for the test.css file. When using a css/js file instead of scss, everything including HMR works fine. I'm also not getting any warning about sass needing to be installed, so I assume Vite.js skips the scss file completely for some reason.
Is it a good idea to use the rollupOptions.input option for just listing resources in the first place or is there a better way? As I'm not building a JS application, there's no entry point such as an index.html, just some js/scss files I want to process.

You need to install SASS npm add -D sass https://vitejs.dev/guide/features.html#css-pre-processors.
The input file is a JavaScript file input: 'main.js', that itself imports the SCSS files import './resources/test.scss';.
Generally, the backend integration guide would help you with the setup for a multipage app like WordPress https://vitejs.dev/guide/backend-integration.html.

React + Babel: How can I load a CSS file for a shared component library?

I'm currently trying to build a shared component library that I can use across my different projects.
This is my index.js file:
import Avatar from "./components/Avatar";
import Heading1 from "./components/Heading1";
import styles from "./global.css";
export { Avatar, Heading1 };
The reason I am loading global.css is because I want to use a custom font.
When I run babel src -d build, it seems to skip my CSS file:
myapp-ui edmund/theming % npm run build
> #myapp/ui#0.1.0 build /Users/edmundmai/Documents/src/myapp/myapp-ui
> babel src -d build
src/components/Avatar.js -> build/components/Avatar.js
src/components/Heading1.js -> build/components/Heading1.js
src/index.js -> build/index.js
src/stories/Avatar.stories.js -> build/stories/Avatar.stories.js
src/stories/Headling1.stories.js -> build/stories/Headling1.stories.js
src/theme.js -> build/theme.js
When I go into one of my apps and try to load this shared component library, it also throws an error about a missing CSS file:
Failed to compile.
../myapp-ui/build/index.js
Module not found: Can't resolve './global.css' in '/Users/edmundmai/Documents/src/myapp/myapp-ui/build'
How would I load a CSS or custom font for a shared component library?

Add a CSS framework to Angular vendor bundle

Here is my situation :
Web site powered by Angular 4
Initialised with Angular Starter Kit
Using Semantic UI as CSS framework
Here is my issue :
Adding Semantic UI to webpack has no effect.
Here is what I tried :
(I followed the official Angular documentation for webpack)
Add semantic-ui to package.json from terminal
npm install semantic-ui-css --save
Add vendor bundle to the entry property in webpack.common.js
[...]
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' :
'./src/main.browser.ts',
'vendor': './src/vendor.ts'
},
[...]
Create the src/vendor.ts file and set its content to :
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// My CSS framework
import 'semantic-ui-css';
What I got :
Webpack build without error, the vendor bundle is created :
vendor.bundle.js 3.74 MB 2 [emitted] [big] vendor
And webpack inject the bundle script in the HTML page :
<script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js" async></script></body>
But the visual doesn't change (but should I check it with CDN) and I don't see the vendor.bundle.js file in the dist folder.
I probably miss something, what is it ?

Below statement only imports semantic.js as package.json is pointing
to that file.
import 'semantic-ui-css';
To import CSS, you can add the below:
// To import CSS
import 'semantic-ui-css/semantic.css';
OR in src/styles/styles.scss
#import '../../node_modules/semantic-ui-css/semantic.css';

How to add Semantic-UI to Phoenix

How do I add Semantic-UI to Phoenix?
Semantic-UI is installed in a folder and updated using NPM, and the actual CSS and Javascript files are built using GULP. Where should the full install folder be placed?
Can it be automatically updated through Mix like the rest of the dependencies?
Should the generated css and javascript be placed in project/web/static/css (or /js) or /vendor?
How do set up Gulp/Sematic-UI configuration to automatically put the files in the right places?
Again, can Mix run Gulp/Semantic-UI build automatically?

Where should the full install folder be placed?
Actually, you just need 2 files: semantic.js & semantic.css.
if you did npm install --save semantic-ui you should find them in ./semantic/dist/
So, where should these 2 files be placed?
It depends on ... are you brunch or webpack? What is relevant to a phoenix app is to find the static files (css, js, font, img, ...) in the ./priv/static folder as you can see in the endpoint.ex Plug.Static. Phoenix is not aware of the directory where you did put these files before running brunch, webpack or/and gulp.
Can it be automatically updated through Mix ...
Yes, add a script in package.json, modify the watchers in config/dev.exs
Should the generated css and javascript be placed in project/web/static/css (or /js) or /vendor?
Same answer, are you brunch or webpack?
What is relevant to a phoenix app is to find the static files (css, js, font, img, ...) in the ./priv/static folder as you can see in the endpoint.ex Plug.Static. Phoenix is not aware of the directory where you did put these files before running brunch, webpack or/and gulp.
How do set up Gulp/Sematic-UI configuration to automatically put the files in the right places?
Check out the file ./semantic.json to set up the output of the gulp build command.
can Mix run Gulp/Semantic-UI build automatically?
Yes, add a script in package.json, modify the watchers in config/dev.exs
This is not easy, and I recommend you to first start using npm semantic-ui-css and when your build works well to switch to npm semantic-ui

It is quite easy to integrate Semantic UI LESS only Distribution with Phoenix application with a bit of a trick. I would suggest you to use Webpack instead of brunch/gulp as it is relatively popular with lot of plugins and easy to configure.
Before starting with the procedure, it is expected that the Phoenix App is installed with default Brunch build tool and it's working.
Integrating Webpack
Please follow my Semantic UI and Webpack integration detailed guide with in-depth step by step procedure. This answer is in reference to this article.
Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack
Integrating Semantic UI
Before we install Semantic UI, we need to put some configurations in place. We will create a new semantic-fix file.
vim web/static/lib/semantic-fix.js
Paste the following contents in the semantic-fix.js file which we just created. This file will take care of putting all Semantic UI assets in place for using it with our application
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"#fontPath : '../../themes/",
"#fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
We are going to make a custom theme.config file for Semantic UI. Hence change the path location in semantic-fix.js file as follows:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
Replace it with following code:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../web/static/css/theme.config';\n",
'utf8'
);
I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.
Add semantic-fix.js needs to run on every postinstall callback while installing npm packages. Hence we will place it as follows under package.json scripts section.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Now it's time to install Semantic UI LESS package. After the installation, the semantic-fix.js file will be called from the postinstall script.
npm install --save semantic-ui-less && node semantic-fix.js
After Semantic UI finishes installation, we need to copy the node_modules/semantic-ui-less/theme.config.example to web/static/css/theme.config.
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Override the existing paths to our paths
/* Path to site override folder */
#siteFolder : '../../web/static/css/site';
&
// #import "theme.less";
#import "~semantic-ui-less/theme.less";
Copy semantic LESS initialising file node_modules/semantic-ui-less/semantic.less to web/static/css. This file imports different component styles.
Change the locations for this file's import statements from #import "definitions/...."' to #import "~semantic-ui-less/definitions/...."
Similarly we need to add semantic.js file to web/static/js folder to import all JavaScript components as follows:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.js is the entry file in our webpack config. Hence we need to import all the files including Semantic UI files to app.js. Add the following lines at the end of app.js file
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
The integration is now complete and ready to run. Semantic UI is now completely intergrated with webpack and it's time to give it a try. Run the Phoenix server mix phoenix.server from project root. It should trigger webpack to compile all the files including semantic-ui - mix phoenix.server
This procedure is documented in more detail in my article (Linked on the top) which can be referred if there is any confusion.
Hope that helps.

It is quite easy to integrate Semantic UI LESS only Distribution with Phoenix application with a bit of a trick. I would suggest you to use Webpack instead of brunch/gulp as it is relatively popular with lot of plugins and easy to configure.
Before starting with the procedure, it is expected that the Phoenix App is installed with default Brunch build tool and it's working.
Integrating Webpack
Please follow my Semantic UI and Webpack integration detailed guide with detailed step by step procedure. This answer is in reference to this article.
Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack
Integrating Semantic UI
Before we install Semantic UI, we need to put some configurations in place. We will create a new semantic-fix file.
vim web/static/lib/semantic-fix.js
Paste the following contents in the semantic-fix.js file which we just created. This file will take care of putting all Semantic UI assets in place for using it with our application
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"#fontPath : '../../themes/",
"#fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
We are going to make a custom theme.config file for Semantic UI. Hence change the path location in semantic-fix.js file as follows:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
Replace it with following code:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../web/static/css/theme.config';\n",
'utf8'
);
I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.
Add semantic-fix.js needs to run on every postinstall callback while installing npm packages. Hence we will place it as follows under package.json scripts section.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Now it's time to install Semantic UI LESS package. After the installation, the semantic-fix.js file will be called from the postinstall script.
npm install --save semantic-ui-less && node semantic-fix.js
After Semantic UI finishes installation, we need to copy the node_modules/semantic-ui-less/theme.config.example to web/static/css/theme.config.
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Override the existing paths to our paths
/* Path to site override folder */
#siteFolder : '../../web/static/css/site';
&
// #import "theme.less";
#import "~semantic-ui-less/theme.less";
Copy semantic LESS initialising file node_modules/semantic-ui-less/semantic.less to web/static/css. This file imports different component styles.
Change the locations for this file's import statements from #import "definitions/...."' to #import "~semantic-ui-less/definitions/...."
Similarly we need to add semantic.js file to web/static/js folder to import all JavaScript components as follows:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.js is the entry file in our webpack config. Hence we need to import all the files including Semantic UI files to app.js. Add the following lines at the end of app.js file
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
The integration is now complete and ready to run. Semantic UI is now completely intergrated with webpack and it's time to give it a try. Run the Phoenix server mix phoenix.server from project root. It should trigger webpack to compile all the files including semantic-ui - mix phoenix.server
This procedure is documented in more detail in my article (Linked on the top) which can be referred if there is any confusion.
Hope that helps.

Resources