Get css files when compiling using #nrwl/web:package - nomachine-nx

I need to get css files for the build version of a library using #nrwl/web:package, the library that I'm creating doesn't have an index.html, it's just plain TS, but when I try to compile using web:package, CSS files are not shown, in the build for this library I have:
{
"build": {
"builder": "#nrwl/web:package",
"options": {
"outputPath": "libs/data-table/dist",
"tsConfig": "libs/data-table/tsconfig.lib.json",
"project": "libs/data-table/package.json",
"entryFile": "libs/data-table/src/index.tsx",
"external": [ "react", "react-dom" ],
"styles": [ "libs/data-table/src/lib/index.css", "libs/data-table/src/lib/responsive.scss" ],
"webpackConfig": "libs/data-table/webpack.config.js",
"assets": [
{
"glob": "README.md",
"input": ".",
"output": "."
}
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
}
}
And in webpack.config.js I have:
const getConfig = require('#nrwl/react/plugins/babel');
const cssModuleRegex = /\.module\.css$/;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (config) => {
config = getConfig(config);
config.module.rules.forEach((rule, idx) => {
// Find rule tests for CSS.
// Then make sure it excludes .module.css files.
if (rule.test.test('foo.css')) {
rule.exclude = rule.exclude
? Array.isArray(rule.exclude)
? [...rule.exclude, cssModuleRegex]
: [rule.exclude, cssModuleRegex]
: cssModuleRegex
}
});
// Add new rule to handle .module.css files by using css-loader
// with modules on.
config.module.rules.push({
test: /\.module\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-modules-typescript-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1
}
}
]
});
config.module.rules.push({
test: /\.module\.(scss|sass)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1
}
}
]
});
return config;
}
But for some reason it seems that is not read.

Related

My angular 7 app is not able to load chunks from proper folder

I have an ASP.NET MVC application, with front-end is angular-cli (angular 7).
Ever since upgrading from 6 to 7 the paths of the chunks are wrong. Apparently the angular is trying to load chunks(using lazy loading) from the root(/) while it is generated in the dist folder. So it gives me 404 error, although the chunks are there in the dist folder
I have tried using ng build --prod --base-href dist
Also tried changing baseUrl in my ts.config.
Probably there should be some option in angular.json to change this behavior.
here is my angular.json
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"testapp": {
"root": "dist/",
"sourceRoot": "NgSrc",
"projectType": "application",
"architect": {
"build":
{
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "NgSrc/index.html",
"main": "NgSrc/App/main.ts",
"tsConfig": "NgSrc/tsconfig.app.json",
"polyfills": "NgSrc/polyfills.ts",
"assets": [
"NgSrc/assets",
"NgSrc/favicon.ico"
],
"styles": [
"node_modules/angular2-toaster/toaster.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
// "node_modules/angular2-toastr/bundles/angular2-toaster.umd.min.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "NgSrc/environments/environment.ts",
"with": "NgSrc/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "testapp:build"
},
"configurations": {
"production": {
"browserTarget": "testapp:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "testapp:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "NgSrc/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "NgSrc/polyfills.ts",
"tsConfig": "NgSrc/tsconfig.spec.json",
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/ng2-toastr/bundles/ng2-toastr.min.js"
],
"styles": [
"node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
],
"assets": [
"NgSrc/assets",
"NgSrc/favicon.ico"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"testapp-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "testapp:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "testapp",
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
}```
For those who are clueless like me, The answer lies in the angular.json configuration file. Apparently, there are 2 properties baseHref & deployUrl that we need to understand. baseHref defines the base URL for the application and deployUrl is URL where files will be deployed. So in order to load chunks from a separate folder, we will need to modify deployUrl.
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"baseHref": "/dist/",
"deployUrl": "/dist/",
"outputPath": "../dist"
...
}
}
}

Not able to import `.scss` file getting error

In angular I am getting following error:
ERROR in ./app/shared-components/header/header.component.scss
Module build failed (from ../node_modules/sass-loader/lib/loader.js):
#import '~styles.scss';
^
File to import not found or unreadable: ~styles.scss.
in D:\IBO\Project\IBO-UI\NG-IBO\src\app\shared-components\header\header.component.scss (line 4, column 1)
Error:
#import '~styles.scss';
here is my angular.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ibo": {
"root": "src",
"sourceRoot": "src",
"projectType": "application",
"prefix": "",
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ibo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src",
"src/assets",
"src/web.config"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap",
"node_modules/angular-calendar",
"./src/styles"
]
},
"scripts": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"src/styles/styles.scss",
],
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ibo:build"
},
"configurations": {
"production": {
"browserTarget": "ibo:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ibo:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"./src/styles/styles.scss"
],
"scripts": [],
"assets": [
"./src/favicon.ico",
"./src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ibo-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "app",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ibo:serve"
},
"configurations": {
"production": {
"devServerTarget": "ibo:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ibo"
}
How to come up with this?
Thanks in advance.
// Angular CLI: 7.3.9
// Node: 10.15.0
// OS: win32 x64
// Angular: 7.2.15
Hi,
Here is how I fixed my problem.
I created file with variables in
src/theme/_project-variables.scss
then inside main.scss and component.scss files i used
#import "~theme/project-variables";
If you don't put "_" in filename it will not render.
Also you need to include this file in every component.scss's where you want to use your variables.

React CSS Modules, babel-plugin-react-css-modules with electron-compile no webpack

I am trying to start using react-css-modules w/ babel-plugin-react-css-modules. At present I have an electron-forge application running react.
My .compilerc looks like the following:
{
"env": {
"development": {
"application/javascript": {
"presets": [
["env", { "targets": { "electron": "2.0.0" } }],
"es2015", "stage-0", "react"
],
"plugins": ["transform-decorators-legacy", "transform-runtime"],
"sourceMaps": "inline"
}
},
"production": {
"application/javascript": {
"presets": [
["env", { "targets": { "electron": "2.0.0" } }],
"es2015", "stage-0", "react"
],
"plugins": ["transform-decorators-legacy", "transform-runtime"],
"sourceMaps": "none"
}
}
}
}
It's my understanding that .compilerc is analogous to .babelrc (I do not have a .babelrc file), see: electron-compile (which electron-forge makes use of - I guess)
However, I have .css files in my project directory, and if I run DEBUG=* electron-forge start I see that the are just being passed through ( not preprocessed )
I have tried adding react-css-modules to my plugins line in .compilerc and also creating a new .babelrc
.compilerc:
"env": {
"development": {
"application/javascript": {
"presets": [
["env", { "targets": { "electron": "2.0.0" } }],
"es2015", "stage-0", "react"
],
"plugins": ["react-css-modules", "transform-decorators-legacy", "transform-runtime"],
"sourceMaps": "inline"
}
},
.babelrc
{
"env": {
"development": {
"application/javascript": {
"plugins": ["react-css-modules"]
}
}
}
}
Both of which after running yarn add babel-plugin-react-css-modules -s, but I still get a compilation error no compiler found when I attempt to run:
import "mystyles.css"

Not able to extract css using Webpack2

I am trying to extract all the css into one file, I am using webpack2 and i have extract-text-webpack-plugin#2.0.0-rc.0, the following is my code
webpack
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './app/main.ts',
output: {
path: './dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{ test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] },
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', publicPath: "./dist" }) }
]
},
resolve: {
extensions: ['.js', '.ts']
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
minify: {
collapseWhitespace: true
},
}),
new ExtractTextPlugin({
filename: 'style.css',
disabled: false,
allChunks: true
})
]
};
package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^2.0.0-rc.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"ts-loader": "^2.0.3",
"tslint": "^3.15.1",
"typescript": "~2.0.10",
"typings": "^2.1.1",
"webpack": "2.2.1"
},
"repository": {}
}
main.ts
require('../app/content/custom.css');
import 'core-js';
import 'reflect-metadata';
import 'zone.js/dist/zone';
import { enableProdMode } from '#angular/core'
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
when i try to run the webpack, i get the following error
I was following this tutorial for building webpack webpack tutorial
First you can safely remove the const webpack = require('webpack') from your webpack.config.js, it's not needed :)
Could you try to without publicPath: './dist' && use: ['css-loader'] instead of use: 'css-loader' in ExtractTextPlugin.extract() ?

Error: options/query provided without loader. Webpack 2.2.0-rc.3

I've updated webpack from rc2 to rc3 and since that I can not start my project via npm start
I get the error like that
> webpack-dev-server
Error: options/query provided without loader (use loader + options) in {
"test": {},
"exclude": {},
"use": "file-loader",
"query": {
"name": "[name].[ext]"
}
}
Here is my config
module: {
rules: [
{
test: /\.html$/,
exclude: /node_modules/,
use: 'file-loader',
query: {
name: '[name].[ext]',
},
},
{
test: /\.s?css$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]_[hash:base64:5]',
},
},
'sass-loader',
'sass-resources-loader',
'postcss-loader',
],
query: {
modules: true,
},
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
],
},
rollback to rc2 doesnt resolve the problem..
I believe that the problem is in rc3 because I have another project which had rc2 and could start. It have broken right after update webpack to rc3
You need to edit your config because Webpack 2 has changed its schema for declaring loaders.
Refactor this part:
{
test: /\.html$/,
exclude: /node_modules/,
use: 'file-loader',
query: {
name: '[name].[ext]',
},
},
to this:
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
query: {
name: '[name].[ext]'
}
}
]
},
Apply this transformation to other loaders you're declaring and it should work :)

Resources