I followed by instructions included in Bootstrap documentation https://getbootstrap.com/docs/4.0/getting-started/download/#npm and installed Bootstrap via Webpack.
Then I wanted to import css styles as here https://getbootstrap.com/docs/4.0/getting-started/theming/ AND
I'VE ENCOUNTERED A PROBLEM:
When I adding this import (#import "node_modules/bootstrap/scss/bootstrap";) to my custom.scss file and order sass --watch custom.scss:custom.css in the console I'm getting this two errors:
1) Error: Cannot find module
"-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!../../node_modules/bootstrap/scss"
2)./src/tu_sassy/custom.css Module not found: Can't resolve
'../../node_modules/bootstrap/scss' in
'/home/zebra/Desktop/testowa/src/tu_sassy'
My file structure is similar as in Bootstrap documentation, included as screenshot below.
!For more I need to add that when I delete this import from custom.scss everything works like a charm ...AND is still reusable and non-corrupted to original Bootstrap stylesheet 'my own stylesheet' WHY ?
One quick tip up front. If you want to write inline-code within your StackOverflow post, use backticks (`) around the code. That makes reading your post much easier.
Sass has its own functionality to import from node modules. Webpack Sass loader provides the ~ (tilde) prefix as a way to tell the compiler that it should resolve the path out of the node_modules folder.
#import "~bootstrap/scss/bootstrap";
If you have a dependency tree of packages within node_modues that import sass files, you can also tell Webpack Sass loader to include node_modules for resolving paths:
{
loader: "sass-loader", // compiles Sass to CSS
options: {
includePaths: [
join(dirname(module.filename), 'node_modules')
]
}
Related
I am trying to use sass with react, but none of my sass files are loading. I did not use create-react-app to start this project, I started it from scratch using web pack and npm init.
When I try to use a variable, like $titleColor, I get an error,
"Uncaught ReferenceError: $titleColor is not defined".
There are no import errors, and all imported paths are successfully loaded. There are no compile errors either--if I don't try to access $titleColor, my app works fine.
Here is my code:
// index.html:
<link rel="stylesheet" href="/src/assets/styles/app.scss">
<link rel="stylesheet" href="/src/assets/styles/colors.scss">
// app.scss
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
#import "./colors.scss"
// colors.scss
$titleColor: 'rgba(211,64,80,1.0)';
// menuSection.js, a React Component
import '../../assets/styles/colors.scss'
// web pack config
module: {
rules: [
{
test: /\.scss$/,
use: ["sass-loader"]
}
]
}
please try in this way,
1. install 'npm install node-sass --save'.
2. rename app.css file to app.scss
3. create a new file with name variable.scss and put your title color like
$titleColor: #aeaeae;
4. import this color in app.scss with #import "variables.scss".
5. then use your $titleColor like 'background-color: $titleColor'.
You cannot "attach" a SASS/SCSS file to an HTML document.
Try to compile into a CSS and attach that css file to HTML document
How to include SCSS file in HTML
and $titleColor error is because of global variables file is not included or global variable $titleColor is not defined in your project, search for $titleColor in your project and make sure it is included in your .scss file
Check the usage of SCSS variales
you installed only-sass loader. this just tells webpack to recognize .scss files. you have to tell webpack evrything step by step. I assume you already installed node-sass as well because sass-loader requires it.
you need to install css loader and style loader. css loader takes your css and turns it to javascript code inside the bundle.js. style loader will take that javacript code and inject it into the DOM. after you installed, add them to webpack.config.js like so:
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
rules are the kinda to do list for webpack. each rule is defined in an object. test will tell webpack whenever it sees this type of file, do what loaders say. if you have only one loader u define just like loader:"". if you have an array of loaders u use use:[]. you have to be aware that there is an order to this array in .scss rule.
css-loader is translator, style-loader is injector. it seems like first you have to translate and add css-loader first. but actually they load in reverse order.
in your index.html you do not need to link any css file. style-loader will handle it.
I am currently working on building a set of UI modules that developers can use to create content on their sites (similar to Bootstrap, Foundation etc). Each UI module is created as its own npm package and a developer will then pull the required modules into their project via npm.
I have a components-accordion package which contains just the CSS for an accordion. It has a file structure as follows:
/lib
/build
/node_modules
index.css
package.json
The index.css file shown above consists of a relative link to the lib directory where the actual styles for the component live:
./lib/accordion.css
I have been testing this package with a React Accordion project and have imported it for the styles. However the relative paths in this package seem to not be correctly resolved by Webpack.
import "components-accordion";
gives an error:
Failed to compile.
./src/components/Accordion.js
Module not found: Can't resolve 'components-accordion' in ...
If I link to the index.css file directly:
import "components-accordion/index.css";
../components-accordion/index.css
Module not found: Can't resolve './lib/accordion' in...
Any ideas would be great.
Thanks
Update your webpack configuration to include the lib folder as part of webpack modules, using path
const path = require("path");
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'lib')
]
},
for a good practice,In which directory we keep multiple css files like ( style.min.css , font.awesome.css) in Angular4
you have to use webpack and it`s plugins like css-loader and style-loader
then import them in you appComponent.ts:
for example:
import '/assets/style.css';
css file will load and inject automatically to page when you run webpack build.
When I create my production bundle I do not require any stylesheets in javascript, they are included in index.html. The stylesheets are compiled with a grunt watch from sass to a bundle.css.
While developing I use webpack dev server. Now I want to include the css in the javascript bundle for hot module replacement, but without changing any existing javascript files.
The dev server is using dedicated index.html and webpack.config files, so preferably that's where I include the css bundle. Is this possible?
Maybe it's worth mentioning that I'm using React.
Answer: It looks like you can change the entry[] of webpack.config (example), to access a different .js file. Try creating referencing two different .js entry files for your respective webpack.config files, to import a different CSS file or omit the import line entirely. This compromises DRY, but does what you want.
React shouldn't make any difference.
Hot module is a red herring; it's implemented as a plugin, independently of the above:
plugins: [
...
new webpack.HotModuleReplacementPlugin());
],
Omitting the CSS module loader in webpack.config.dev wouldn't work.
module: {
loaders: [
...
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
]
}
because it would cause a parse error in import 'path/to/my.css' in index.js
I'm trying to create an isomorphic react app using express, react, and webpack.
Everything works fine until I import a css file in one of my components. I understand node can not handle this import, but can someone explain how this package on github allows their components to have a css import line?
https://github.com/kriasoft/react-starter-kit
I would like to make my project similar to that. Do they have a line anywhere that has the server ignore that line when rendering components?
This is the error I get
SyntaxError: /home/USER/Code/shared/general/ru/src/components/MainPage/MainPage.scss: Unexpected token (1:1)
> 1 | #import '../variables.scss';
| ^
2 |
3 | .MainPage {
4 | background-color: $primary-color;
at Parser.pp.raise (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:425:12)
at Parser.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
at Parser.pp.parseExprSubscripts (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:217:19)
You need yet another loader to make css/style loaders to work.
https://www.npmjs.com/package/webpack-isomorphic-tools
But Webpack is made for client side code development only: it finds all require() calls inside your code and replaces them with various kinds of magic to make the things work. If you try to run the same source code outside of Webpack - for example, on a Node.js server - you'll get a ton of SyntaxErrors with Unexpected tokens. That's because on a Node.js server there's no Webpack require() magic happening and it simply tries to require() all the "assets" (styles, images, fonts, OpenGL shaders, etc) as if they were proper javascript-coded modules hence the error message.
Good luck!
Edit:
I think you also want to see this SO question. Importing CSS files in Isomorphic React Components
The project that the OP mentioned is using this:
https://github.com/kriasoft/isomorphic-style-loader
So yes, another loader + an interface to insert and use the styles.
Maybe you doesn't use the sass loader in tour webpack configuration.
Try install this loader:
Sass loader
Example of webpack config:
module.exports = {
...
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
sassLoader: {
includePaths: [path.resolve(__dirname, "./some-folder")]
}
};
I can suggest also you to use postcss to apply autoprefixer!