Running ng serve the CSS is placed into <style> tags as expected.
Running ng serve -ec the CSS is kept in it's bundle styles.bundle.css
Running ng serve -ec -sm the CSS is still shown just in the bundle and no sourcemaps seem to be created.
Note: We're using LESS.
Angular CLI: 1.6.2
Node: 6.11.2
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cli: 1.6.2
#angular-devkit/build-optimizer: 0.0.36
#angular-devkit/core: 0.0.22
#angular-devkit/schematics: 0.0.42
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.9.2
#schematics/angular: 0.1.11
#schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0
This is due to an issue with Angular CLI has been broken on and off since v1.3.2 and currently is still broken as of v1.7.x
Did a little more digging & comparing the webpack config file, found that the new CLI is using Webpack plugin "raw-loader" which does not yet support sourcemap (somehow the ticket has been closed but I am not sure if the sourcemap has been implemented).
Only option is to downgrade to v1.6.6 then apply a patch provided by #CharltonC
In "node_modules#angular\cli\models\webpack-configs\common.js" file, in line 162, Add a line devtool: 'source-map', in the returned common configuration object in the getCommonConfig function, e.g.
...
catch (e) { }
return {
devtool: 'source-map', // add this line
resolve: {
extensions: ['.ts', '.js'],
...
Tested with the following Commands in terminal (also works with Sass #import):
ng serve // no sourcemap
ng serve -sm -ec // has sourcemap
ng serve --sourcemap --extract-css // has sourcemap
ng serve --sourcemap --extractCss // has sourcemap
https://github.com/angular/angular-cli/issues/9099
Related
I have a nrwl Angular-Jest application setup via npx create-nx-workspace.
While working on this project, I had upgraded from:
"firebase": "9.1.3",
"firebase-admin": "9.12.0",
"firebase-functions": "3.15.7",
to
"firebase": "9.16.0",
"firebase-admin": "11.5.0",
"firebase-functions": "4.2.0",
to get the extension emulator working locally. Although it works, I now have issues running jest. It says that firebase now has es6 imports and wont work. Error Message Below:
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/Users/[justOnlyMe]/Desktop/[nrwlProject]/node_modules/firebase-admin/lib/esm/auth/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import mod from "../../auth/index.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (../../../node_modules/firebase-functions/lib/common/providers/identity.js:25:14)
I've also tried using transformIgnorePatterns to get a transformation just for firebase node_modules but now jest continues to run and seems unresponsive. (I believe this may be an issue with ts-jest in jest).
transform: {
'^.+\\.[tj]s$': 'ts-jest',
},
transformIgnorePatterns: [
'../../../node_modules/(?!#firebase.*/)',
'../../../node_modules/(?!firebase/)',
'../../../node_modules/(?!firebase-admin/)',
'../../../node_modules/(?!firebase-functions/)',
],
Question: Does anyone know how to get es6 node_modules to work with jest in a nrwl nest.js typescript project?
My jest config:
module.exports = {
displayName: '[projectName]',
preset: '../../../jest.preset.js',
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
},
},
transform: {
'^.+\\.[tj]s$': 'ts-jest',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '../../../coverage/apps/back/[projectName]',
testEnvironment: 'node',
}
In your jest config add in the transform object the babel-jest config:
"transform": {
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "ts-jest"
}
I want to use the plugin https://github.com/iamfrntdv/postcss-increase-text-sizes to make my fonts larger in the whole css and spit it out into a separate file.
That's why I want to use postCss with webpack in Symfony.
I configure it as follows:
in the webpack.config.js file he writes .enablePostCssLoader()
I create the postcss.config.js file with the following configuration
module.exports = {
from: './web/assets/src/css/custom.css',
output: './output.css',
plugins: [
require("postcss-increase-text-sizes")({
fontSizeMultiplyBy: 1.2,
lineheightMultiplyBy: 1.2,
selectorsBlackList: ["h2"]
}),
],
};
Unfortunately, I do not get anything in the "output", no file named output.css is created after reloading encore with npm run watch or npm run build
Webpack does not report the error that it "does not see" the file even if you type "test test" in the from: directive.
Instead, it throws an error if there is something "wrong" (eg a syntax error) in the postcss.config.js file.
I am attempting to set up a nuxt project with scss. I added the following packages to my project:
"sass": "^1.37.0",
"sass-loader": "10",
and I updated nuxt.config.js to say the following to point to my new scss main file:
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/sass/main.scss'
],
I had to use older versions because i was getting errors with certain functions I was using but i managed to get it working correctly on my local machine, and it builds just fine repeatedly as I update code as well.
I am now trying to deploy to staging on a Linux/nginx server and I am getting the following errors when building npm run build:
ERROR in ./assets/sass/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) postcss-custom-properties: <css input> Unknown word
> 1 | var(--font-size-2)/var(--font-ratio)
| ^
It looks like it's using css builder instead of sass builder! Does anyone know how to fix this? I doublechecked that the files on the server include the sass-loader and that the config is pointing to my .scss file, and i checked the documentation which states that Nuxt will automatically choose the correct loader.
What am I doing wrong?
I have a monorepo project which one project (main) depends on the other (components).
So when I start the whole monorepo the main project uses a webpack.dev and the components project just use simple typescript compiler.
Like this:
(main): yarn start: webpack-dev-server ...
(components): yarn start: tsc -b
I have no problem when it comes to only TS code, but when it comes to non-ts files (css) I get a webpack module missing error.
I've already put both css-loader and style-loader into my webpack config from my main project but it didn't seem to solve the problem, it looks like typescript is not compiling the css file correctly
in my component project I have some like this:
import "./index.css"
export const Button = () => {
...
}
and then I get this error from my main project
Module not found: Error: Can't resolve './index.css' in '{...}/frontend/design-components/build'
my webpack in my main project:
module: {
rules: [
...,
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
but I think the main problem is the way the components project is handling the build (i'm building only with typescript, no rollup nor webpack in this project)
just ended up creating a webpack for my component project as well
I'm having errors when I try to build my VueJS project with the style sheets.
My error when I run "yarn run dev --watch" produces these errors:
c:\wamp\www\DBViewer2>yarn run dev --watch
yarn run v1.6.0
warning package.json: No license field
$ encore dev --progress=true --watch
Running webpack ...
0% compiling
Webpack is watching the files…
95% emitting ERROR Failed to compile with 1 errors 16:00:56
This dependency was not found:
* !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue in ./assets/App.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./A
I'm not sure what is causing this. It appears it is looking for the files in the wrong location?
Here is my App.vue file:
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss-loader">
/* Import Font Awesome Icons Set */
$fa-font-path: 'font-awesome/fonts/';
#import 'font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
$simple-line-font-path: 'simple-line-icons/fonts/';
#import 'simple-line-icons/scss/simple-line-icons.scss';
/* Import Bootstrap Vue Styles */
#import 'bootstrap-vue/dist/bootstrap-vue.css';
/*// Import Main styles for this application*/
#import './assets/scss/style';
</style>
Here is my webpack.config.js:
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public_html/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('main', './assets/main.js')
.addEntry('vendor', './assets/js/vendor.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
.enableVueLoader()
// allow sass/scss files to be processed
.enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
Any suggestions is greatly appreciated. Have spent 2 days now trying different things and research on google. I'm just not familiar enough with symfony/encore and this is my first vuejs project.
In order to be able to use SCSS in a Vue template, you need to declare in the single file component the following style block:
<!-- Those styles are not scoped to that particular component -->
<style lang="scss">...</style>
<!-- Or those styles are scoped to that particular component -->
<style lang="scss" scoped>...</style>
You can even use both in the same file, if needed.
You'll also need to install the correct node dependencies by running:
npm install --dev node-sass sass-loader
This should then work out of the box when used in a project initialized with vue-cli.
However you could need to add this in your webpack 'test' configuration to make lang="scss" work in tests when using vue-loader's ?inject option:
resolveLoader: {
alias: {
'scss-loader': 'sass-loader',
},
},