I would like to write my styles in stylus in place of sass, but I'm not finding any information to do it.
Here is my actual configuration into webpack.config.js:
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('web/assets/')
.setPublicPath('/assets')
.cleanupOutputBeforeBuild()
.addEntry('app', './assets/js/main.js')
.addStyleEntry('global', './assets/css/global.scss')
.enableSassLoader()
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction());
module.exports = Encore.getWebpackConfig();
any hint?
You can use .enableStylusLoader() in Encore but you need to add stylus and stylus-loader with
yarn add stylus stylus-loader --dev
You can add custom loaders
Encore
// ...
.addLoader({
test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
})
;
Remember to install stylus loader npm install --save-dev stylus-loader.
Notice, the configuration of the loader might have changed based on what Webpack version you are using, but I hope you get the general idea.
Related
How can we use NUXT3 with sass, also please share the documentation.
I tried to add sass into nuxt3 project, but the vite looks like no options to load scss
Install it first and save as devDependency
$ yarn add sass sass-loader --dev
# or
$ npm install sass sass-loader --save-dev
Configure if you want to use global scss
// nuxt.config.ts
export default defineNuxtConfig({
// more
css: [
// SCSS file in the project
"~/assets/style/main.scss", // you should add main.scss somewhere in your app
],
})
In your components
<style lang="scss" scoped>
//...
<style/>
I'm trying to use https://github.com/UniversalViewer/universalviewer V4 project with my Symfony application. I'm using Webpack Encore. I used yarn add universalviewer command to install plugin, next yarn encore dev and all works correct except CSS. CSS are not build.
So next I tried to add to my app.css file line #import "/universalviewer"; but then I have lot of errors when I try to build by yarn encore dev.
Errors like
ERROR Failed to compile with 2 errors
error in ./node_modules/universalviewer/dist/cjs/index.js
Syntax Error: CssSyntaxError
(1:1) /var/www/myproject/node_modules/universalviewer/dist/cjs/index.js Unknown word
How to build it properly?
My webpack.config.js
const Encore = require('#symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/app.js')
.enableStimulusBridge('./assets/controllers.json')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
;
module.exports = Encore.getWebpackConfig();
try
#import "~universalviewer/uw";
But I would try adding the main CSS file by adding into app.js (main JS file):
import './styles/global.scss';
then inside global.scss add import CSS which u want:
#import "~universalviewer/uw";
I am currently learning sass/scss and I'm trying to set up a webpack configuration for a practice project. So I looked up the tools and technology I'd need, some resources suggested I use "node sass, sass-loader and css-loader"(the webpack documentation) while another suggested post-CSS instead of css-loader. I'd like to know the difference.
TL;DR
No, you don't need postcss-loader in webpack to use SASS. sass-loader would alone do the work. Although, node-sass is required to be installed.
What is PostCSS?
PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
Ref: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535
Autoprefixer is one of the highly recommended plugin to use.
What is SASS?
SASS is a CSS preprocessor. Learn more here https://sass-lang.com/guide. sass-loader is webpack loader which does the same thing for you with the webpack tooling.
What does node-sass do?
Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
It is not any alternative to sass-loader. node-sass is in peerDependencies of sass-loader so you'll need it to use sass-loader.
Ref: https://github.com/sass/node-sass
Can you use both sass-loader and postcss-loader?
Yes! And I would recommend you do use it together. In-fact, if you eject a Create React App project, in the webpack config you can find both sass-loader and postcss-loader used.
It's not required but I do highly recommend the autoprefixer plugin. The loaders allow you to import the specified file types.
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}
}
I want to add SASS to my project, I'm using Symfony 4.2.1 / Ubuntu 16.04
Here is the commands I've use:
composer require encore
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
yarn install
So I have a webpack.config.js file the Documentation say:
// webpack.config.js
// ...
Encore
// ...
// enable just the one you want
// processes files ending in .scss or .sass
.enableSassLoader()
// processes files ending in .less
.enableLessLoader()
// processes files ending in .styl
.enableStylusLoader()
;
There is a Encore object.
In another tutorial I see:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
It totally different type file the documentation say (the first code)
And my file look as:
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
// const $ = require('jquery');
console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
It is another different type of file again!
What must I do now ? (I've made nothing after 'yarn install')
Your first webpack.config file has been setup to use Encore, a Symfony component that wraps webpack to provide an easy to use API.
The second webpack.config file is not using Encore, it is a traditional webpack setup.
Since you are using the latest version of Symfony you probably want to use the first, which provides a much easier to understand API.
You can read more about Encore in the symfony docs here:
https://symfony.com/doc/current/frontend/encore/css-preprocessors.html
i'm starting a new project using reactjs ES6 and webpack
using react-static-boilerplate starter question is how can i import bootstrap4 into the build proccess ?
i dont want to use the bootstrap.css generated file, instead i want webpack to build it for me so i can get to change its #variables and apply my theme etc.
i started project by cloning boilerplate
> git clone -o react-static-boilerplate -b master --single-branch \
https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install
installed bootstrap using npm
npm install bootstrap#4.0.0-alpha.3
now if i required the main bootstrap file into my index.js it will load fine. but how can i include the sass files of bootsrap to start customizing it ?
First of all you need to download proper loader for scss
Install sass-loader
npm install sass-loader --save-dev
Then you need to configure your webpack to test all scss files so it can handle it. Here it is how it is done
{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}
If you got error regarding node-sass
If you got error like cannot resolve node-sass then install
npm i node-sass --save-dev
Now if you import bootstrap.scss webpack will bundle it for you
import "bootstrap/scss/bootstrap.scss"
How to customize it
Example in your own scss file
$btn-font-weight:bold;
and then import the component you want to override or the whole bootstrap.scss
#import '~bootstrap/scss/bootstrap.scss';
In my case style.scss
$btn-font-weight:bold;
#import '~bootstrap/scss/bootstrap.scss';
main.js
import "bootstrap/scss/bootstrap.scss"
import "./style.scss"
Hope this help you to achieve your goal!
I have created a demo app here
run npm install
and npm start
got to localhost:8080
Seems like the boilerplate doesn't use sass-loader, and doesn't look for .scss files.
So first off install npm i sass-loader --save
Then under the loaders part in the webpack config you should add something like this:
webpack.config.js
var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
// ...
loaders: [
// ...
{
test: /\.(css|scss)$/,
include: [
path.join(nodeModules, 'bootstrap'),
],
loaders: ["style", "css", "sass"]
}
]
// ...
};
Now, if you want to play around with bootstrap's .scss variables, you can do so like this:
styles/app.scss
$brand-warning: pink !default;
#import '~bootstrap/scss/bootstrap.scss';
and in your main.js put in the style import
import "styles/app.scss";
Also, I should mention, this seems very close to this answer
Now that you're switched to react-slingshot with webpack already set up for sass there's a few less steps. From the raw boilerplate, add bootstrap 4 with npm as you already did:
npm install bootstrap#4.0.0-alpha.3 --save
Then in src/styles/styles.scss you want to add a couple imports
#import "./bootstrap-custom";
#import "~bootstrap/scss/bootstrap";
This is essentially the same thing as #DanielDubovski is showing you but it's a little more conventional to have a separate file of bootstrap overrides, and you don't need default anymore since you're planning on overriding bootstraps defaults and you probably don't want to accidentally override your custom bootstrap colors. To get started with src/styles/bootstrap-custom.scss, you can go into node_modules/bootstrap/scss/_variables.scss and see a complete list of the default variables. You can then copy out the variable names that you want to update. Here's an example of the bootstrap-custom.scss that just overrides the greyscale colors:
/*
* overrides for bootstrap defaults, you can add more here as needed, see node_modules/bootstrap/scss/_variables.scss for a complete list
*/
$gray-dark: #333;
$gray: #777;
$gray-light: #000;
$gray-lighter: #bbb;
$gray-lightest: #ddd;
npm install --save-dev sass-loader css-loader style-loader node-sass
on your webpack.config.js:
loaders: [
{
test: /\.scss$/,
loaders: [ 'style', 'css', 'sass' ]
}
]
Not the OP's original framework (but that was a few years back). As of react-scripts#2.0.0 it now has built in SCSS compiling. So if you're using that for any new projects, it's simple enough to import: https://facebook.github.io/create-react-app/docs/adding-bootstrap