I have a problem, I'm trying to build a component library and at the same time I would like to have a dev server in the same project for fast debugging and developing of this component library.
Currently my configuration is next, for library building I use typescript to transpile to es5 and I have all styles as scss and compile them into css with node-sass. For this config to work I import styles as css(not sass) since otherwise scss files won't be found in lib directory.
Here are my source files:
And this is lib folder after being compiled:
And this is my configuration for building lib folder
Now I'm trying to configure dev server with webpack and I decided to import components directly from src (not lib) to fast forward development. And it doesn't work with my current styles imports (as css) because webpack compiles my scss styles as a big bundle and merges it into js bundle but those statements where I import css are still there which case errors.
Module not found: Error: Can't resolve './Title.css'
I believe there is a solution to this problem but which way to take I'm not sure, please suggest!
My preference is to keep library building without webpack and use webpack for dev server
Related
When compiling scss from one folder to another folder, imported paths do not compile correctly. I assume I'm just doing something wrong. I haven't found any instructions for doing this (assuming its possible).
I have a "Styles" folder that contains my app.scss. I then compile it to wwwroot/css/app.css.
Solution Structure
Import in app.scss
Import in compiled app.css
Import in compiled app.css as read by browser
It should be under wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css instead of...
Compiler Config Defaults
Compiler Config
I rebooted my machine and now the path is compiling appropriately.
I'm developing with vue.js and vue cli 3. Currently I handle my CSS styles with SASS and compile them with Koala-app. At the moment I am still using it because it is very easy to configure the main.scss and their respective files, and then compile it with autoprefix, in compressed format and with source map to another folder with the name styles.css, I keep the following structure:
I need to replace koala with NPM SASS Loader, how do I replicate this same configuration with VUE CLI 3? The information for the webpack should be added in vue.config.js? Or where? and what would be the parameters to achieve the same effect?
I'm creating the initial setup of a proof of concept project using ReactJS and typescript, and I'd like to include the CSS modules in it without having to eject the webpack configuration.
Here are the steps I followed so far:
npm install -g create-react-app
create-react-app firstapp --scripts-version=react-scripts-ts
npm install react-app-rewired --save-dev
npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
package.json:
"start": "react-app-rewired start --scripts-version react-scripts-ts"
config-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules');
module.exports = function override(config, env){
config = rewireCssModules(config, env);
return config; }
I correctly set my App.module.scss file, and referenced it in my App.tsx file:
import styles from './App.module.scss';
When I run the project, I have an error regarding the css module:
Cannot find module './App.module.scss'.
When I do the exact same project without the typescript configuration, it works though.
What should I change for the CSS modules to be taken into account?
I came accross typings-for-css-modules-loader, but I'm not sure how to integrate it in my configuration since I didn't eject the webpack configuration.
Thanks in advance,
Thomas .T
EDIT 1:
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
Gonna accept this as an answer within 2 days.
I got the workaround after googling a lot. I'm new to react js and trying to build using typescript so I found the solution and started using
react-script-ts
package. But when I started using css module faced the problem import class from './button.css' didn't work so I used import './button.css' but in this got lot of css conflicts, higher component scope css always overridden by lower component. so googled a lot and finally got the solution.
Solution
From 2.1 create-react-app having support for typescript so convert your application to 2.1 above
1.create new application using `npx create-react-app my-new-app --typescript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run
source : https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/
I'm trying to build a test project with TypeScript via Webpack. Have just index.ts file and base.less (or base.css) file imported in index.ts and it fails with errors on css-loader. Without imported LESS (CSS) file in a .ts file all working good.
I have got another big project with JS only (no TypeScript) and it working good with the same webpack.config file (babel instead of ts loader).
Webpack#2.2.0
All needed loaders are installed.
webpack.config.js and Bitbucket link to the test project
ERROR in ./~/css-loader/lib/css-base.js
Module build failed: Error: Final loader didn't return a Buffer or String
You have a wrong RegExp rule for TypeScript loader in your webpack.config.js. You need this:
`test: /(.ts|.tsx)$/`
but you have this:
`test: /(.ts|.tsx)?/`
Which says: load as TypeScript file no matter what.
I am using Angular CLI for Angular2 project. And I am using less for my styling.
To compile less file with Angular CLI, I have to import less file with its absolute path. Which breaks editor's intellisense. So instead of using LESSPlugin comes with AngularCLI, I want to use IDE's less watcher and compiler (available in vs code as well as webstorme) to compile less to css.
But there are less files still exists in source, 'ng serve' try to compile less and that breaks the build.
Is there any way to configure angular cli to ignore less file and use available css in source folder?
I manage to do that by uninstalling less module from project using 'npm uninstall less --save-dev'
Now I can use relative path for less import and also intellisense is working now.
When you generate a new project using angular cli, type a command like below:
ng new new-project --style less
It will setup your project using less. When you serve(run) the project each time, angular cli will automatically compile your less files.
According to ng command manual
ng new <options...>
--style (String) (Default: css)