In my Vue component, I changed the language from the default CSS to the explicitly set SCSS, like this.
<style lang="scss">
div.bordy{ border: solid 3px red; }
</style>
I also changed the webpack.config.js according to this post by LinusBorg, so it looks like this.
module.exports = {
entry: ["babel-polyfill", "./index.js"],
output: { path: __dirname, filename: "bundle.js" },
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.vue$/, loader: "vue" },
// { test: /\.scss$/, loader: 'style!css!sass' },
{ test: /\.s[a|c]ss$/, loader: "style!css!sass" }
]
},
babel: {
presets: ["es2015", "stage-3"],
plugins: ["transform-runtime"]
},
vue: { loaders: [{ scss: "style!css!sass" }] },
resolve: { alias: { "vue$": "vue/dist/vue.common.js" } }
}
The guy explains that by doing so, we catch SCSS and map it to SASS. However, I'm getting an error saying the following.
Module not found: Error: Cannot resolve module 'scss-loader'
I've tried installing the packages as shown below but it gave no difference in the output error.
npm install scss-loader --save-dev
Here, I get uncertain and googlearching leads me to more confusion because I'm reading hints in all possible directions, not rarely commented with angry shouts of not resolving the issue.
Should I use style lang="sass" to being with?
When I try that, I have to install node-sass and I'm not sure if I'm resolving the problem or hiding it...
You have to install sass-loader and node-sass and it's resolving the problem not hiding it.
sass-loader documentation clearly says:
The sass-loader requires node-sass and webpack as peerDependency. Thus you are able to specify the required versions accurately.
and here are peerdependency from it's package.json:
"peerDependencies": {
"node-sass": "^3.4.2 || ^4.0.0",
.....
Which means sass-loader will work with these versions of node-sass.
It requires it in the very 4th line of it's code - sass-loader/index.js:
'use strict';
var utils = require('loader-utils');
var sass = require('node-sass');
Once you have it installed, you can do any of following:
<style lang="scss">
or
<style lang="sass">
as you are going to use same loader for both of these.
Related
I see I am not the first to have this issue, but I've tried all the answers given previously and the error refuses to go away. I've tried with and without CSS modules.
The error is:
ERROR in ./src/taskpane/components/ui/Card.module.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
The Card.js file is simple:
// import './Card.css';
import css from './Card.module.css';
function Card() {
return <div className={css.card}></div>
}
export default Card;
The Card.module.css only has a couple of CSS rules:
.card {
border-radius: 10px;
box-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
package.json has these versions in devDependencies:
"css-loader": "^6.7.1",
"style-loader": "^3.3.1",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "4.7.4"
I've got this in webpack.config.js:
resolve: {
extensions: [".ts", ".tsx", ".html", ".js", ".css"],
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true
}
}
]
},
Is there anything else that needs to be shown to solve this? I didn't want to create a TL;DR question by adding every line of code.
I've been banging my head against this for hours, trying all the suggestions I could find, but none have worked.
TIA
I am trying to open a sqlite3 database encrypted with sqlcipher. I have the password and I could open it successfully using sqlitebrowser.
I started my project using this template. It is based on the electron-forge webpack plugin.
When I type yarn start, it creates a .webpack folder and all the compiled code goes in it. When I stop the terminal command, this folder disappears.
Then I wanted to use the package #journeyapps/sqlcipher to open my database, but this line is causing an error in the main process: const sqlite3 = require("#journeyapps/sqlcipher")
The error is:
Error: Cannot find module '<<my_path>>/.webpack/main/native_modules/lib/binding/napi-v6-linux-x64/node_sqlite3.node'
The package documentation says two things about using it with electron-forge:
make sure that the folder node_modules/#journeyapps/sqlcipher/lib/binding/napi-v6-linux-x64 exists
-> yes it exists
Disable rebuilding of this library using the onlyModules option of electron-rebuild in your package.json "config": { "forge": { "electronRebuildConfig": { "onlyModules": [] // Specify other native modules here if required } }
-> I did it, I added the lines of code
I still have the error, but I feel it can be solved "easily" (with a lot more understanding of webpack than I have). Indeed, a solution would be to move the folder binding/napi-v6-linux-x64 into .webpack each time I launch the app, right?
I tried to do electron-rebuild -f -w sqlite3, the rebuild succeeded but nothing happens, I still have the same error.
I am stuck here and cannot go further for my app, as it lays on reading this database.
Should I start a new project and avoid using webpack? Do you have any example of a project where this package is successfully imported and used?
Thank you in advance for your help!
Well, I finally figured it out. Actually, I tried so much little changes but I managed to make the app work (nearly) as expected.
How I found the solution
First: this doesn't have anything to do with the library sqlcipher itself. In fact, it's a webpack configuration problem while dealing with native libraries.
I started a fresh minimal install of electron-forge with Webpack and Typescript template (npx create-electron-app test-electron-forge-github --template=typescript-webpack) and added sqlite3 and #journeyapps/sqlcipher. It worked so I made a lot of changes in my Webpack configuration to make it closer with the electron-forge one.
Warning
The changes I made broke Redux. I chose to sacrifice Redux in order to make sqlcipher work, as today I didn't find a solution for both of them to work.
Old Webpack configuration files
main.webpack.js
module.exports = {
resolve: {
extensions: ['.ts', '.js']
},
entry: './electron/main.ts',
module: {
rules: require('./rules.webpack'),
}
}
renderer.webpack.js
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: require('./rules.webpack'),
},
}
rules.webpack.js
module.exports = [
{
test: /\.node$/,
use: 'node-loader',
},
{
test: /\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '#marshallofsound/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
resolve: {
fullySpecified: false,
}
},
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
{
test: /\.(sass|less|css)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
]
},
]
New configuration
main.webpack.js
module.exports = {
resolve: {
extensions: ['.ts', '.js']
},
entry: './electron/main.ts',
module: {
rules: [
...require('./rules.webpack'),
{
test: /\.(m?js|node)$/,
parser: { amd: true },
use: {
loader: '#vercel/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
emitDirnameAll: true,
},
}
},
],
}
}
The native modules configuration has been moved from rules.webpack.js to main.webpack.js. This is due to a bug happening in the renderer process if the rule stayed in the rules.wepback.ts file.
The window would open but would stay blank. In the console, there would be an error: __dirname is not defined. See this Github issue from where I took the solution.
Also note that I changed the loader as the previous one was not doing properly its job.
renderer.webpack.js
Unchanged
rules.webpack.js
module.exports = [
{
// We are specifying native_modules in the test because the asset relocator loader generates a
// "fake" .node file which is really a cjs file.
test: /native_modules\/.+\.node$/,
use: 'node-loader',
},
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
{
test: /\.(sass|less|css)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
]
},
]
Redux
I had to remove this property from rules.webpack.js:
resolve: {
fullySpecified: false,
}
This line was making Redux work.
Conclusion
I don't really know how this works, but it works. I hope it will help you if you are struggling as I was.
If my application is using
test: /\.s+([ac])ss?/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:7]'
}
},
{
loader: 'sass-loader',
options: {
sourceMap: !isProductionEnvironment
}
},
{
loader: 'sass-resources-loader',
options: {
resources: 'src/styles/variables.scss'
}
}
]
webpack configuration to load css and sass, semantic-ui-sass package gets hashed upon import, is there a way to comfortably use semantic-ui-react package to decode those hashes?
Alternatively I am trying to use the
:global {
#import '~semantic-ui-sass/semantic-ui';
}
:global directive so that it could be used globally, but the webpack compiler then does not resolve icons and fonts from that package:
Module not found: Error: Can't resolve '../../icons/outline-icons.woff2'
Any ideas please?
I have solved the following issue by manually handling font icons and images by providing the semantic variables with their path:
<src/styles/global.scss>
$icons-font-path: '~semantic-ui-sass/icons';
$flags-image-path: '~semantic-ui-sass/images';
:global {
#import '~semantic-ui-sass/semantic-ui';
}
So I just discovered the susy framework to improve my scss files and I would like to use it inside my MEAN-app. I read the documents and followed the instructions. However, I am unable to use it inside my scss file. I followed the following steps:
install Susy: npm install susy
Make sure sass-loader is installed: npm install sass-loader --save-dev
Sass loader enabled in webpack configuration (webpack.confif.common.js):
module.exports = {
entry: {
'app': './assets/app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
},
{
test: /\.css$/,
use: [{ loader: 'raw-loader' }]
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
],
exprContextCritical: false
}
};
Import susy in my app.component.scss: the website states that I should use #import "~susy/sass/susy"; but that gave me an error so I added a relative path: #import "../../node_modules/susy/sass/susy";
This is what my app.component.scss file looks like now:
#import "SCSS variables/theme-colors";
#import "../../node_modules/susy/sass/susy";
$susy: (
columns: 16,
debug: (image: show),
global-box-sizing: border-sizing
);
$medium-screen: 720px;
$link-color: #330000;
a {
color: $link-color;
&:hover {
color: lighten($link-color, 25%);
}
}
.container {
#include container();
}
**this is the Error I get **
cmd.exe /D /C call C:/Ruby25-x64/bin/scss.bat --no-cache --update
app.component.scss:app.component.css
error app.component.scss (Line 23: Undefined mixin 'container'.)
Process finished with exit code 1
Can someone see what I might've done wrong?
I have been using webpack 4.6.0:
I have following issue when compiling:
Uncaught Error: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| div {
| background-color: yellow;
| color: red;
my webpck config is as following:
var path = require('path');
var webpack = require('webpack');
module.exports = {
mode:'development',
entry: './src/code/app.js',
output: { path: __dirname, filename: 'bundle.js'},
watch: true,
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: "transform-class-properties",
presets: ['es2015', 'react']
}
},
{
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
loader: 'css-loader'
}
]
}
};
and I have :
"css-loader": "^0.28.11",
and my file struct is like:
root:
-src
|-code
|-XXXX.js
|-css
|-HomePage.css
I think it is something related to my css loader, I have tried many methods online, but none of them works. Is there something related to my file structure?
I believe you still need to add a rule for your own css files. Try adding this to your rules.
{
// Preprocess your css files
// you can add additional loaders here (e.g. sass/less etc.)
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
}