admin管理员组

文章数量:1318581

I have an npm library that I maintain that's used across multiple applications. I'd like to share an scss file that has mixins, functions, etc. I can see, after an npm i the scss files are located in the styles folder as specified in the ng-package.json file:

...
"assets": [ ... {"input": "src/lib/styles", "glob": "**/*.scss", "output": "styles"} ... ]
...

My anguar.json file has the following:

...
"assets": [
...
              {
                "glob": "**/*",
                "input": "./node_modules/@company_appstore/company-shared/styles",
                "output": "./src/styles/"
              }
...
]
...

My assumption is after running my ng serve command Angular would output those files into a styles directory in my src directory. However, those files aren't made available at the src level.

I have an npm library that I maintain that's used across multiple applications. I'd like to share an scss file that has mixins, functions, etc. I can see, after an npm i the scss files are located in the styles folder as specified in the ng-package.json file:

...
"assets": [ ... {"input": "src/lib/styles", "glob": "**/*.scss", "output": "styles"} ... ]
...

My anguar.json file has the following:

...
"assets": [
...
              {
                "glob": "**/*",
                "input": "./node_modules/@company_appstore/company-shared/styles",
                "output": "./src/styles/"
              }
...
]
...

My assumption is after running my ng serve command Angular would output those files into a styles directory in my src directory. However, those files aren't made available at the src level.

Share Improve this question asked Jan 22 at 16:11 dcp3450dcp3450 11.2k24 gold badges64 silver badges114 bronze badges 1
  • scss files should not be considered as assets, they're useless at runtime. – Matthieu Riegler Commented Jan 22 at 20:43
Add a comment  | 

1 Answer 1

Reset to default 0

Just reference the scss files directly from the node_modules folder and they will get added during compiilation.

angular.json:

        "styles": [
          "./node_modules/bootstrap/scss/bootstrap.scss",
          "src/global_styles.css"
        ],

The other option is to add the reference to your styles in the angular.json - stylePreprocessorOptions - includePaths.

"architect": {
  "build": {
    "options": {
      ...
      "stylePreprocessorOptions": {
        "includePaths": [
          "./node_modules/@company_appstore/company-shared/styles"
        ]
      }
    }
  }
}

When you import it, you can directly import it like below:

// src/app/appponent.scss
@import "variables"; // Imports from ./node_modules/@company_appstore/company-shared/styles/variables.scss

本文标签: Angularjson not importing assetsStack Overflow