add projectroot to sass includedPaths instead of using replace to fix the paths during build

This commit is contained in:
Art Lowel
2019-06-05 17:14:22 +02:00
parent 56b2ee1f0d
commit 743be6a2cd
18 changed files with 21 additions and 76 deletions

View File

@@ -25,8 +25,8 @@
"prebuild:aot": "yarn run prebuild",
"prebuild:prod": "yarn run prebuild",
"build": "node ./scripts/webpack.js --progress --mode development",
"build:aot": "yarn run syncbuilddir && node ./scripts/resolve-absolute-scss-imports.js && node ./scripts/webpack.js --env.aot --env.server --mode development && node ./scripts/webpack.js --env.aot --env.client --mode development",
"build:prod": "yarn run syncbuilddir && node ./scripts/resolve-absolute-scss-imports.js && node ./scripts/webpack.js --env.aot --env.server --mode production && node ./scripts/webpack.js --env.aot --env.client --mode production",
"build:aot": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode development && node ./scripts/webpack.js --env.aot --env.client --mode development",
"build:prod": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode production && node ./scripts/webpack.js --env.aot --env.client --mode production",
"postbuild:prod": "yarn run rollup",
"rollup": "rollup -c rollup.config.js",
"prestart": "yarn run build:prod",

View File

@@ -1,24 +0,0 @@
const replace = require('replace-in-file');
const path = require('path');
const {
projectRoot,
} = require('../webpack/helpers');
/**
* This script ensures you can use ~ to reference the project dir
* in scss imports for AoT builds as well.
*/
const options = {
files: path.join(projectRoot('build'), '**', '*.scss'),
from: /@import '~\/([^']+)/g,
to: `@import '${path.join(projectRoot('./'), '$1')}`,
};
try {
replace.sync(options);
}
catch (error) {
console.error('Error occurred:', error);
}

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+home-page/home-news/home-news.component.scss';
@import 'src/app/+home-page/home-news/home-news.component.scss';
$home-news-link-color: $green !default;
$home-news-link-color: darken($home-news-link-color, 15%) !default;

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+home-page/home-page.component.scss';
@import 'src/app/+home-page/home-page.component.scss';
div.background-image {
color: white;

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss';
@import 'src/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss';
:host {
> * {

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss';
@import 'src/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss';
:host {
> * {

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+item-page/simple/item-types/journal/journal.component.scss';
@import 'src/app/+item-page/simple/item-types/journal/journal.component.scss';
:host {
> * {

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+item-page/simple/item-types/orgunit/orgunit.component.scss';
@import 'src/app/+item-page/simple/item-types/orgunit/orgunit.component.scss';
:host {
> * {

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+item-page/simple/item-types/person/person.component.scss';
@import 'src/app/+item-page/simple/item-types/person/person.component.scss';
:host {
> * {

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+item-page/simple/item-types/project/project.component.scss';
@import 'src/app/+item-page/simple/item-types/project/project.component.scss';
:host {
> * {

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+item-page/simple/item-types/publication/publication.component.scss';
@import 'src/app/+item-page/simple/item-types/publication/publication.component.scss';
:host {
> * {

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+search-page/search-filters/search-filter/search-filter.component.scss';
@import 'src/app/+search-page/search-filters/search-filter/search-filter.component.scss';
.facet-filter {
background-color: map-get($theme-colors, light);

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss';
@import 'src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss';
::ng-deep .noUi-connect {
background: $info;

View File

@@ -1,4 +1,4 @@
@import '~/src/app/+search-page/search-settings/search-settings.component.scss';
@import 'src/app/+search-page/search-settings/search-settings.component.scss';
.setting-option {
background-color: map-get($theme-colors, light);

View File

@@ -1,4 +1,4 @@
@import '~/src/app/navbar/navbar.component.scss';
@import 'src/app/navbar/navbar.component.scss';
nav.navbar {
border-bottom: 5px $green solid;

View File

@@ -63,18 +63,6 @@ const globalCSSImports = (env) => { return [
buildRoot('styles/_mixins.scss', env),
]};
const themeReplaceOptions =
{
multiple: [
{
search: '@import \'~/([^\']+)',
replace: '@import \'' + path.join(projectRoot('./'), '$1'),
flags: 'g'
}
]
};
const getThemedPath = (componentPath, ext) => {
const parsedPath = path.parse(componentPath);
const relativePath = path.relative(srcPath, parsedPath.dir);
@@ -114,6 +102,5 @@ module.exports = {
getThemedPath,
themedTest,
themedUse,
globalCSSImports,
themeReplaceOptions
globalCSSImports
};

View File

@@ -4,7 +4,6 @@ const {
projectRoot,
buildRoot,
globalCSSImports,
themeReplaceOptions,
themePath,
themedTest,
themedUse
@@ -95,7 +94,7 @@ module.exports = (env) => {
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: [path.join(themePath, 'styles')]
includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
}
},
{
@@ -103,10 +102,6 @@ module.exports = (env) => {
options: {
resources: globalCSSImports(env)
},
},
{
loader: 'string-replace-loader',
options: themeReplaceOptions
}
]
},
@@ -137,12 +132,8 @@ module.exports = (env) => {
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: [path.join(themePath, 'styles')]
includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
}
},
{
loader: 'string-replace-loader',
options: themeReplaceOptions
}
]
},

View File

@@ -4,8 +4,7 @@ const {
themedTest,
themedUse,
themePath,
globalCSSImports,
themeReplaceOptions
globalCSSImports
} = require('./helpers');
const path = require('path');
@@ -171,7 +170,7 @@ module.exports = function (env) {
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: [path.join(themePath, 'styles')]
includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
}
},
{
@@ -179,10 +178,6 @@ module.exports = function (env) {
options: {
resources: globalCSSImports(env)
},
},
{
loader: 'string-replace-loader',
options: themeReplaceOptions
}
]
},
@@ -213,12 +208,8 @@ module.exports = function (env) {
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: [path.join(themePath, 'styles')]
includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
}
},
{
loader: 'string-replace-loader',
options: themeReplaceOptions
}
]
},