I'm trying to include Tailwind CSS within my WordPress setup, which means I have to use post CSS. However when I add the postcss-loader to this rule:
{
test: /\.(sass|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
},
I am returned the following error:
[./src/sass/style.scss] 1.37 KiB {frontend} [built] [failed] [1 error]
ERROR in ./src/sass/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...m\\[focus-within": expected selector, was "]\\:sr-only[focus-wi"
on line 35881 of /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss
>> .sm\[focus-within]\:sr-only[focus-within] {
--^
at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/webpack/lib/NormalModule.js:316:20
at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.callback (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/sass-loader/dist/index.js:73:7)
at Object.done [as callback] (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/neo-async/async.js:8069:18)
at options.error (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/node-sass/lib/index.js:294:32)
# multi ./src/index.js ./src/sass/style.scss frontend[1]
Child mini-css-extract-plugin ../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/css-loader/dist/cjs.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/sass-loader/dist/cjs.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/postcss-loader/src/index.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./src/sass/style.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./src/sass/style.scss 368 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./src/sass/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./src/sass/style.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...m\\[focus-within": expected selector, was "]\\:sr-only[focus-wi"
on line 35881 of /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss
>> .sm\[focus-within]\:sr-only[focus-within] {
--^
I've tried many different approaches and none of them seem to be working. Not sure if I'm misunderstanding something as most of the material I've found is geared towards React setups.
Managed to resolve the issue by changing the order of the loaders to the following:
{
test: /\.(sass|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-sass-loader', 'sass-loader']
},
Related
When running ng serve I have this result:
*./src/main.ts - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
*./src/polyfills.ts` - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
This angular version
Angular CLI: 14.0.6
Node: 16.16.0
Package Manager: NPM 8.14.0
OS: win32 x64
Angular: 14.0.6
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1400.6
#angular-devkit/build-angular 14.0.6
#angular-devkit/core 14.0.6
#angular-devkit/schematics 14.0.6
`#angular/cdk 14.0.5`
#angular/material 14.0.5
#nguniversal/express-engine 7.1.1
#schematics/angular 14.0.6
`rxjs 6.6.7`
typescript 4.6.4
/.component.scss
input[type=text]:disabled {
color: black;
}
.search-row {
.form-group > label {
font-size: 1.1em !important;
color: black;
}
}
.mat-table {
th.mat-header-cell {
font-size: 1.1em !important;
color: black;
}
}//<< here line 17.
#block {
margin: 0% 10%;
}
...
thank you for your help
For anyone landing there, temporarily set optimization: false in your angular.json file. The will allow to see the real error.
In my case it was an unsupported stylesheet import. But it can be any error thrown by Webpack sass-loader.
I added the "path/name" of the scss files in angular.json->projects->project name ->architect->build->options->styles as following then I could find the exact scss issues.
{
...
"projects": {
...
"my-project": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
...
"src/scss/style.scss",
"src/app/components/playlistDetail/playlist-detail.component.scss",
...
]
}
},
Then I could see Sass error as following.
./src/app/components/items/viewitem/viewitem.component.ts - Error: Module build failed (from ./node_modules/#ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
E:/f2022_indy/front/src/app/components/fan/fan.component.scss:17:100: ERROR: Unterminated string token
./src/app/components/fan/fan.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected whitespace.
╷
89 │ #media screen and(max-width: 767px) {
│ ^
╵
src\app\components\fan\fan.component.scss 89:26 root stylesheet
Run the following command
npx browserslist --update-db
For anyone that still has this issue, you can set optimization: false in your angular.json file and rebuild to see the real error with details and then put optimization: true back.
for me the error was that i had an $dark-color variable that is undefined.
I upgraded angular project from 5.2 to 14, I saw this error and its not displayed from which file the error came from.
I tried optimization: false in angular.json file but it did not work since upgrade converted .angular-cli.json to angular.json and json structure seems to be wrong.
I created a new sample project with angular and moved angular.json file from there to upgraded project folder, then changed optimization: false
This time errors shown are specific with line and file name. I resolved those errors in project css files and able to do ng serve
Here's my code:
// #flow
import { EntityModel } from '#http-utils/hateoas';
I compile it:
babel src/ -d dist/
Then I run it, but I get a runtime error:
$ node dist/http-utils-hateoas-example.js
import { EntityModel } from '#http-utils/hateoas';
^
SyntaxError: Unexpected token {
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
What am I doing wrong?
Edit
Based on Flow documentation, my babel config has only #babel/preset-flow. Looks like this is only stripping flow. How do I configure babel to do additional compilation down to code that can be run on nodejs?
{
"presets": [
"#babel/preset-flow"
]
}
The solution was very simple. All I needed was another preset to transpile down to CommonJS.
{
"presets": [
"#babel/preset-flow",
#babel/preset-env
]
}
I started learning webpack. I am aware that webpack4 doesnt require a configuration explicitly. I created one for my project. On every build i see it picking up default config.
below is my package.json
{
"name": "feedback-clientlibs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "hkesani",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
and my webpack.config.js is as follows
var path = require('path');
module.export ={
entry : './js/feedback.js',
mode:'none',
output : {
filename:'feedback.js',
path:path.resolve(__dirname,'webpack.modules')
},
module:{
rules:[
{
test:/\.css$/,
use:['css-loader']
}
]
}
}
I have few css imports into the js files as below
import '../css/feedback.css'
import '../css/all.css'
whenever i run a build (i have cssloader installed) below is what i see
$ npm run build
> feedback-clientlibs#1.0.0 build C:\projects\br_translation\jcr\code\jcr_root\apps\r\dcloud\components\clientlibs\feedback-clientlibs
> webpack
Hash: 7c51d9af54f992c3e551
Version: webpack 4.43.0
Time: 106ms
Built at: 05/10/2020 10:39:42 PM
1 asset
Entrypoint main = main.js
[0] ./src/index.js 6.17 KiB {0} [built]
[1] ./css/feedback.css 302 bytes {0} [built] [failed] [1 error]
[2] ./css/all.css 292 bytes {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./css/feedback.css 1:0
Module parse failed: Unexpected character '#' (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
> #feedback {
| height: 5em;
| padding: 10px 22px 8px 22px;
# ./src/index.js 1:0-28
ERROR in ./css/all.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
> .ratings-stars {
| margin-bottom: 15px;
| height: 13px;
# ./src/index.js 2:0-23
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! feedback-clientlibs#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the feedback-clientlibs#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hkesani\AppData\Roaming\npm-cache\_logs\2020-05-10T17_09_42_363Z-debug.log
Any help is appreciated.
Thanks
Have you tried it with style-loader?
npm install --save-dev style-loader
And update your webpack.config.js rules to:
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
I also notice you did not supply a production flag for your webpack command I would update that script to run:
webpack --mode production -p
Then in your output path try a directory name without the period. This may or may not be the reason but it is normally a naming convention to use a dash or underscore for directory names.
path: path.resolve(__dirname,'webpack_modules')
I think it's defined [here]enter link description here.
It can also be inspected via node:
const webpack = require('webpack')
new webpack.WebpackOptionsDefaulter()
I'm trying import the element ui chalk theme with
import 'element-ui/lib/theme-chalk/index.css'
But I get this in the console:
Error: Module parse failed: Unexpected character '
Am I missing something?
After following this guide I managed to fix this
Basically had to install sass-loader with
npm install sass-loader node-sass style-loader --save-dev
and then add the loader to my webpack.config.js, but I had to do it like this, due to my version:
module: {
rules: [
{ test: /\.s[a|c]ss$/, loader: 'style!css!sass' },
]
}
I am trying to run the command npm run build but it is not working. and I am getting the error below:
> typescript#1.0.0 build /Users/Prashant/Code/typescript
> webpack
Hash: c6dbd1eb3357da70ca81
Version: webpack 3.2.0
Time: 477ms
Asset Size Chunks Chunk Names
bundle.js 2.89 kB 0 [emitted] main
[0] ./src/index.js 51 bytes {0} [built]
[1] ./src/index.css 290 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // Prepare cssTransformation
7 | var transform;
8 |
# ./src/index.js 1:0-22
My web pack config file(webpack.config.js) is:
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
'style-loader'
]
}
]
}
};
And my CSS file(index.css) is
body {
color:red;
}
and my js file index.js is below:
require("./index.css");
alert('this is my alert');
I am trying to run the file but it is not working I have checked all the spelling also try to add a lot of other CSS but it is not working, can you please help me how can I solve this issue?
The loaders are applied in reverse order. That means you're applying style-loader first and then pass its result to css-loader. The output of style-loader is JavaScript, which will insert the styles into a <style> tag, but css-loader expects CSS and fails to parse JavaScript as it is not valid CSS.
The correct rule is:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
I was having the same problem and eventually found that there was a second module rule in the webpack config that was processing *.css files
I solved this by just creating style.css file from the same directory of my js file