How to use "styleIncludePaths" ? #1073

Eusen · 2018-09-10T02:15:08Z

Type of Issue

[?] Bug Report

Description

"styleIncludePaths": {
          "description": "Any additional paths that should be used to resolve style imports",
          "type": "array",
          "items": {
            "type": "string"
          }
}

I found this schema, but no matter how I try, it doesn't work.
My lib dir structure is like this:

/lib/module/src/styles/index.scss
/lib/module/ng-package.json

And I add styleIncludePaths in ng-packge.json like this:

"lib": {
    "entryFile": "src/public_api.ts",
    "styleIncludePaths": [
      "styles/index.scss" // and I have tried "index.scss" , "src/styles/index.scss", but nothing happened.
    ]
}

How To Reproduce

No error, but nothing happened.

Expected Behaviour

How do I use it?
If it doesn't work anyway, can u add a "staticAssetsPaths" schema, like angular.json's architect.build.options.assets ?
I think not only me, many developers need to include static resources in the package, such as font icons. I now use Python to do this.

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr: latest
@angular/*: latest
typescript: 2.9.2
rxjs: latest
node: latest
npm/yarn: latest

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2018-09-10T04:53:49Z

styleIncludePaths doesn’t work as you are describing. Please take a look https://github.com/ng-packagr/ng-packagr/blob/HEAD/docs/style-include-paths.md

…

On Mon, 10 Sep 2018 at 04:15, Eusen ***@***.***> wrote: Type of Issue [?] Bug Report Description "styleIncludePaths": { "description": "Any additional paths that should be used to resolve style imports", "type": "array", "items": { "type": "string" } } I found this schema, but no matter how I try, it doesn't work. My lib dir structure is like this: /lib/module/src/styles/index.scss /lib/module/ng-package.json And I add styleIncludePaths in ng-packge.json like this: "lib": { "entryFile": "src/public_api.ts", "styleIncludePaths": [ "styles/index.scss" // and I have tried "index.scss" , "src/styles/index.scss", but nothing happened. ] } How To Reproduce No error, but nothing happened. Expected Behaviour How do I use it? If it doesn't work anyway, can u add a "staticAssetsPaths" schema, like angular.json's architect.build.options.assets ? I think more than me, many developers need to include static resources in the package, such as font icons. I now use Python to do this. Version Information $ node_modules/.bin/ng-packagr --version ng-packagr: latest @angular/*: latest typescript: 2.9.2 rxjs: latest node: latest npm/yarn: latest — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1073>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQv-Wi_eb9WdCfRgXwOfft_NQFSJbAzyks5uZcsugaJpZM4WgmGd> .

Eusen · 2018-09-10T09:13:10Z

I got this error.

this is my angular.json:

and this is my ng-package.json:

Eusen · 2018-09-10T09:17:37Z

I add aot prop failed too,

Eusen · 2018-09-10T18:06:55Z

hello? Is anyone here?

alan-agius4 · 2018-09-10T18:46:30Z

You need to follow the angular cli schema for libraries. https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_ng_packagr/src/build/schema.json

Those changes need to be added to ng-packagr.json

Eusen · 2018-09-11T03:09:49Z

The problem has not been solved yet. Why closed?

If I just add this just like:
style-include-paths.md
It didn't work either!

Eusen · 2018-09-11T03:11:39Z

If I write something wrong, can you point it out for me?

zjl1985 · 2018-10-22T10:49:37Z

I also encountered the same problem....

chenTeacher · 2019-01-03T07:42:58Z

我想你没有理解stylePreprocessorOptions是什么，它就是一个帮助你省略路径的作用：
// 相对路径工作
@import '../you-style-paths/variables';
在添加
"stylePreprocessorOptions": {
"includePaths": [
"src/you-style-paths"
]
},
后
你只需要这么写
@import 'variables';
同理你在开发包的时候不想写这么长串的路径时，可以这么写 "styleIncludePaths": ["./src/assets/styles"]，然后打包的时候cli会帮你匹配路径。这个是我的理解。
我想你是想将资源文件一起打包出来吧，很不幸 ng-packagr 不支持，或者我还没有找到方案。

zjl1985 · 2019-01-03T07:45:54Z

我想你没有理解stylePreprocessorOptions是什么，它就是一个帮助你省略路径的作用：
// 相对路径工作
@import '../you-style-paths/variables';
在添加
"stylePreprocessorOptions": {
"includePaths": [
"src/you-style-paths"
]
},
后
你只需要这么写
@import 'variables';
同理你在开发包的时候不想写这么长串的路径时，可以这么写 "styleIncludePaths": ["./src/assets/styles"]，然后打包的时候cli会帮你匹配路径。这个是我的理解。
我想你是想将资源文件一起打包出来吧，很不幸 ng-packagr 不支持，或者我还没有找到方案。

谢谢你，我解决了，是在打包之后，又加了一个脚本把我的资源文件加入到dist里面

// scripts\build\copy-style.js
const path = require('path');
const fs = require('fs-extra');

const sourcePath = path.resolve(__dirname, '../../src/app/package');
const targetPath = path.resolve(__dirname, '../../dist');


console.log('---------------copy style folder-----------------------');
fs.copySync(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
console.log('---------------done-----------------------');

package.json package后会执行

"postpackage": "node ./scripts/build/copy-style.js"

renyaoxiang · 2019-03-12T03:59:44Z

我想你没有理解stylePreprocessorOptions是什么，它就是一个帮助你省略路径的作用：
// 相对路径工作
@import '../you-style-paths/variables';
在添加
"stylePreprocessorOptions": {
"includePaths": [
"src/you-style-paths"
]
},
后
你只需要这么写
@import 'variables';
同理你在开发包的时候不想写这么长串的路径时，可以这么写 "styleIncludePaths": ["./src/assets/styles"]，然后打包的时候cli会帮你匹配路径。这个是我的理解。
我想你是想将资源文件一起打包出来吧，很不幸 ng-packagr 不支持，或者我还没有找到方案。

谢谢你，我解决了，是在打包之后，又加了一个脚本把我的资源文件加入到dist里面

脚本代码怎么写？

zjl1985 · 2019-03-18T05:06:02Z

我想你没有理解stylePreprocessorOptions是什么，它就是一个帮助你省略路径的作用：
// 相对路径工作
@import '../you-style-paths/variables';
在添加
"stylePreprocessorOptions": {
"includePaths": [
"src/you-style-paths"
]
},
后
你只需要这么写
@import 'variables';
同理你在开发包的时候不想写这么长串的路径时，可以这么写 "styleIncludePaths": ["./src/assets/styles"]，然后打包的时候cli会帮你匹配路径。这个是我的理解。
我想你是想将资源文件一起打包出来吧，很不幸 ng-packagr 不支持，或者我还没有找到方案。

谢谢你，我解决了，是在打包之后，又加了一个脚本把我的资源文件加入到dist里面

脚本代码怎么写？

// scripts\build\copy-style.js
const path = require('path');
const fs = require('fs-extra');

const sourcePath = path.resolve(__dirname, '../../src/app/package');
const targetPath = path.resolve(__dirname, '../../dist');


console.log('---------------copy style folder-----------------------');
fs.copySync(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
console.log('---------------done-----------------------');

package.json package后会执行

"postpackage": "node ./scripts/build/copy-style.js"

renyaoxiang · 2019-03-19T00:46:03Z

我想你没有理解stylePreprocessorOptions是什么，它就是一个帮助你省略路径的作用：
// 相对路径工作
@import '../you-style-paths/variables';
在添加
"stylePreprocessorOptions": {
"includePaths": [
"src/you-style-paths"
]
},
后
你只需要这么写
@import 'variables';
同理你在开发包的时候不想写这么长串的路径时，可以这么写 "styleIncludePaths": ["./src/assets/styles"]，然后打包的时候cli会帮你匹配路径。这个是我的理解。
我想你是想将资源文件一起打包出来吧，很不幸 ng-packagr 不支持，或者我还没有找到方案。

谢谢你，我解决了，是在打包之后，又加了一个脚本把我的资源文件加入到dist里面

脚本代码怎么写？
// scripts\build\copy-style.js
const path = require('path');
const fs = require('fs-extra');

const sourcePath = path.resolve(__dirname, '../../src/app/package');
const targetPath = path.resolve(__dirname, '../../dist');


console.log('---------------copy style folder-----------------------');
fs.copySync(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
console.log('---------------done-----------------------');
package.json package后会执行
"postpackage": "node ./scripts/build/copy-style.js"

不好意思，忘记说了，我使用了less，会有图片、字体资源。我希望构建的时候，我可以看到less的效果，拷贝的时候也可以拷贝less相应的css和图片、字体资源，有办法吗？

Eusen · 2019-03-19T02:10:32Z

@renyaoxiang 你这就有点强人所难了。本身这个工具就不支持这样做。

renyaoxiang · 2019-03-19T16:21:05Z

@renyaoxiang 你这就有点强人所难了。本身这个工具就不支持这样做。

但是我需要这个需求啊，
就不能有一个俩者皆得的方案吗？

Eusen · 2019-03-20T05:35:43Z

@renyaoxiang 你这就有点强人所难了。本身这个工具就不支持这样做。

但是我需要这个需求啊，
就不能有一个俩者皆得的方案吗？

你可以用webpack打包试试，自己写个配置。或者rollup也行。

zjl1985 · 2019-03-20T05:46:54Z

我想你没有理解stylePreprocessorOptions是什么，它就是一个帮助你省略路径的作用：
// 相对路径工作
@import '../you-style-paths/variables';
在添加
"stylePreprocessorOptions": {
"includePaths": [
"src/you-style-paths"
]
},
后
你只需要这么写
@import 'variables';
同理你在开发包的时候不想写这么长串的路径时，可以这么写 "styleIncludePaths": ["./src/assets/styles"]，然后打包的时候cli会帮你匹配路径。这个是我的理解。
我想你是想将资源文件一起打包出来吧，很不幸 ng-packagr 不支持，或者我还没有找到方案。

谢谢你，我解决了，是在打包之后，又加了一个脚本把我的资源文件加入到dist里面

脚本代码怎么写？
// scripts\build\copy-style.js
const path = require('path');
const fs = require('fs-extra');

const sourcePath = path.resolve(__dirname, '../../src/app/package');
const targetPath = path.resolve(__dirname, '../../dist');


console.log('---------------copy style folder-----------------------');
fs.copySync(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
console.log('---------------done-----------------------');
package.json package后会执行
"postpackage": "node ./scripts/build/copy-style.js"
不好意思，忘记说了，我使用了less，会有图片、字体资源。我希望构建的时候，我可以看到less的效果，拷贝的时候也可以拷贝less相应的css和图片、字体资源，有办法吗？

我这写的就是copy文件啊，你有啥想copy的就是写就行了

又不是只能写一个

juanslingerURUIT · 2019-05-17T13:25:58Z

@Eusen I have an example working using styleIncludePaths.

Have two libraries, style and component. Could integrate styles library with component library.

The architect is something like this.

libraries
- components
  - component-1
    - component-1.scss
  - ng-package.json
- styles
  - scss
    - components
      - component-1.scss

File ng-package.json
"styleIncludePaths": ["../styles/scss"]

By this, the component library will search at styles/scss so inside component-1.scss I added @import 'components/component-1'.

This worked for me!

Let me know if you have an issue.

maxmumford · 2020-04-20T09:58:19Z

Note that the path is relative to the library you're compiling - this is particularly relavent if you're using a nrwl monorepo structure!

github-actions · 2020-06-19T08:05:32Z

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
_{This action has been performed automatically by a bot.}

alan-agius4 closed this as completed Sep 10, 2018

michael-vasyliv mentioned this issue Aug 13, 2019

A bug with extract scss files to dist #1374

Closed

github-actions bot locked and limited conversation to collaborators Jun 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use "styleIncludePaths" ? #1073

How to use "styleIncludePaths" ? #1073

Eusen commented Sep 10, 2018 •

edited

alan-agius4 commented Sep 10, 2018 via email

Eusen commented Sep 10, 2018

Eusen commented Sep 10, 2018

Eusen commented Sep 10, 2018

alan-agius4 commented Sep 10, 2018

Eusen commented Sep 11, 2018

Eusen commented Sep 11, 2018

zjl1985 commented Oct 22, 2018

chenTeacher commented Jan 3, 2019

zjl1985 commented Jan 3, 2019 •

edited

renyaoxiang commented Mar 12, 2019

zjl1985 commented Mar 18, 2019

renyaoxiang commented Mar 19, 2019 •

edited

Eusen commented Mar 19, 2019

renyaoxiang commented Mar 19, 2019

Eusen commented Mar 20, 2019

zjl1985 commented Mar 20, 2019

juanslingerURUIT commented May 17, 2019 •

edited

maxmumford commented Apr 20, 2020

github-actions bot commented Jun 19, 2020

How to use "styleIncludePaths" ? #1073

How to use "styleIncludePaths" ? #1073

Comments

Eusen commented Sep 10, 2018 • edited

Type of Issue

Description

How To Reproduce

Expected Behaviour

Version Information

alan-agius4 commented Sep 10, 2018 via email

Eusen commented Sep 10, 2018

Eusen commented Sep 10, 2018

Eusen commented Sep 10, 2018

alan-agius4 commented Sep 10, 2018

Eusen commented Sep 11, 2018

Eusen commented Sep 11, 2018

zjl1985 commented Oct 22, 2018

chenTeacher commented Jan 3, 2019

zjl1985 commented Jan 3, 2019 • edited

renyaoxiang commented Mar 12, 2019

zjl1985 commented Mar 18, 2019

renyaoxiang commented Mar 19, 2019 • edited

Eusen commented Mar 19, 2019

renyaoxiang commented Mar 19, 2019

Eusen commented Mar 20, 2019

zjl1985 commented Mar 20, 2019

juanslingerURUIT commented May 17, 2019 • edited

maxmumford commented Apr 20, 2020

github-actions bot commented Jun 19, 2020

Eusen commented Sep 10, 2018 •

edited

zjl1985 commented Jan 3, 2019 •

edited

renyaoxiang commented Mar 19, 2019 •

edited

juanslingerURUIT commented May 17, 2019 •

edited