I have started a project with Vue js in combination with Buefy. Buefy (Bulma) is developed in SASS and i work with LESS. I want to override some values from Buefy but my project is setup with LESS. My question is:
Can i work with both preprocessors?
In my components i use:
<style lang="less"></style>
but i also want to be able to use:
<style lang="sass"></style>
Can this be done?
Many thanks in advance!
"Sure, you can"
However, I discourage you to do so, because you're going to preprocess the styles twice, with different preprocessors (scopes, class naming, unexpected weird errors), you'll have to debug your code to see if it's working right.
Moving forward: depending on your Vue setup, the configuration you need for the webpack(in case you use it, but gulp, grunt, etc... work too ) you have.
In case of webpack just add the configuration for Sass in your {projectRoot}/webpack.config.js, inside module rules array under .vue rule:
{
test: /\.vue$/,
loader: 'vue'
},
// CODE GOES HERE =====>
{
test: /\.s[a|c]ss$/,
loader: 'style!css!sass'
}
And in your vue option in the same file (create if you don't have one, should be under module option):
vue: {
loaders: {
scss: 'style!css!sass'
}
}
You have to install node-sass and css-loader and sass-loader and style-loader...
$ npm install --save-dev node-sass css-loader sass-loader style-loader
Related
So I created two projects using React + Redux + SASS + Typescript with
Vite and Webpack.
I was amazed using Vite as the configuration part was pre handled as compared to Webpack. But again my project is big so I'd prefer Webpack over Vite.
LINK FOR VITE PROJECT : https://codesandbox.io/p/github/MrIndra/ReactRedux/csb-n4u7e3/draft/reverent-bohr?file=%2Fdist%2Findex.html&selection=%5B%7B%22endColumn%22%3A8%2C%22endLineNumber%22%3A6%2C%22startColumn%22%3A8%2C%22startLineNumber%22%3A6%7D%5D
LINK FOR WEBPACK PROJECT: https://codesandbox.io/p/github/MrIndra/react-sass-typescript-webpack/draft/affectionate-cookies?import=true&file=%2Fbuild%2Fmain.css&selection=%5B%7B%22endColumn%22%3A36%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A36%2C%22startLineNumber%22%3A4%7D%5D
,
Note : All the images test: /\.(?:ico|gif|png|jpg|jpeg)$/i, generated after build will be in their same parent folders as before build.
Current Problem
I have index.module.scss in the root directory which contains all the root level variables. Now again in every components, I have placed folder/component folder.module.scss files. Now npm run build is generating weird kind of css file.[image below]
The snapshot for the configuration of SCSS test: /\.s[ac]ss$/i, is
.
The folder.module.scss looks something like this
And the output where the buttons is not styled with the scss provided.
I assume you are trying to bundle all css/scss into one single css file. If so try following.
// install sass-loader and sass implementation of your choice
npm i sass-loader css-loader sass --save-dev
//install this plugin to extract CSS/Sass into separate or single file
npm i --save-dev mini-css-extract-plugin
and add following to your webpack config,
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.s[ac]ss$/i,,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
Say I have following project structure (Well its more complex than below structure):
CommonComponents
CommonComponentA
CommonComponentB
package.json
webpack.config.js
.babelrc
ModuleA
ComponentC //import CommonComponentA
ComponentD
package.json
webpack.config.js
.babelrc
ModuleB
ComponentE //import CommonComponentB
ComponentF
package.json
webpack.config.js
.babelrc
I compile, bundle and utilize ModuleA and ModuleB separately. When I switched to babel 7, importing modules from CommonComponents directory stopped working. Babel ignores files which are outside current working directory and doesn't transpile them so webpack compilation fails complaining 'Unexpected token' at imported component.
From what I have understood so far, they have changed the way .babelrc lookup happens. I really can't wrap my head around the terms 'root', 'babelrcRoots', etc.
Can someone explain what I will need to do in order to compile ModuleA and ModuleB succesfully from their respective working directory ?
Based on the real structure of your project (it is a monorepo setup with a root folder?) and the webpack config you are using, you can have several ways to solve this, one way could be by adding the include key on you babel loader rule on webpack configuration files, you will end up with something like this:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, '../CommonComponents'),
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
as stated before, this depends on your real project structure, but you can give it a try and check it works.
I have a project with React and Webpack as build system. My devDependencies
devDependencies
"webpack": "^4.5.0",
webpack.config.js
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
...
And I get this error:
ERROR in ./node_modules/project/components/InfiniteScroller.jsx
Module parse failed: Unexpected token (9:8) You may need an
appropriate loader to handle this file type.
What I am doing wrong?
It looks like you're including uncompiled code from node_modules, your loader specifically excludes compiling node_modules code (exclude: /node_modules/) for efficiency reasons. Usually modules expose a compiled version of the library (usually in /dist, usually pointed to by "main" property in the package.json of the module).
If you want to parse code in node_modules, I recommend you just do it for node_modules/project, rather than all modules for efficiency. Modify your exclude statement accordingly, something like: exclude: /node_modules(?!\/project)/
You'll also need to make sure you use the necessary presets to handle the files (e.g. babel-preset-env, babel-preset-react) and any plugins the file might need (e.g. transform-object-rest-spread etc).
Since I don't have enough points to comment, I'll post as an answer -
I see you're importing a .jsx module - You should try adding
query: {
presets: ['es2015','react']
}
to your rule after use
I've installed font-awesome using npm install font-awesome --save-dev, and now Im having trouble including it on my project. Below are my code.
webpack.config.js
{
test: /\.(svg|woff|woff2|ttf|eot|otf)$/,
loader: 'file-loader?name=assets/[name].[ext]',
}
app.scss
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome.scss";
Error
ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
Module parse failed: /ProjectSite/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
By reading doing some research I finally solved it by adding ([\?]?.*)$ on the regex part.
{
test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
loader: 'file-loader?name=assets/fonts/[name].[ext]',
}
Have you installed the npm file-loader package?
npm install --save-dev file-loader
I have a webpack example repository in which I include font-awesome. It might help. You can find it here
with new webpack versions you may wanna try
{
test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
use: [
{
loader: 'file-loader?name=assets/fonts/[name].[ext]'
}
]
}
This might be a basic question but I'm really new to react and webpack.
How do I go about adding normalize.css and css frameworks?
I don't want to use bootstrap, instead I found a lightweight css framework called concise css. I'd like to use this since i'm mainly after the positioning and formatting of my elements and have more flexibility with my styles.
I've already installed css-loader and styles-loader.
I've read you can load styles to components by using
require("./path/to/css")
However, i'm still really confused by this.
You can put your require("./path/to/css") inside of your index.js or any other top-level React component. It will get bundled in your web pack for all child components from there.
Make sure you have your loaders installed in your package.json file and youur webpack.config.js file calls the loaders. A barebones webpack.config.js file that accomplishes this might look like:
module.exports = {
entry: [
'./app/index.js'
],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
Upon further reading, I realized normalize.css is very static and webpack works with more dynamic files.
So instead, I just got the cdn for normalize.css and use semantic-ui-react