使用SCSS与Angular 2/4的体系结构

我正在尝试设置使用SCSS与我的角度4项目而不是普通CSS的体系结构。 Uptil现在我遵循Angular Style guide的规定，将CSS简单地放置在组件ts文件的旁边，每个组件都有一个单独的目录，如下面的特征优先方法。使用SCSS与Angular 2/4的体系结构

由于现在我正在使用SCSS，我简单地用SCSS文件替换了我的CSS文件。但我无法理解，在哪里我应该把我的_variables.scss,_mixins.scss和通用styles.scss文件，这样的变量总是第一次加载，以便变量的依赖关系可以在SCSS文件中解决。

我正在使用webpack编译我的SCSS文件。

webpack.config.js

module: { 
    rules: [ 
     { 
      test: /\.ts$/, 
      loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'html-loader' 
     }, 
     { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      loader: 'file-loader?name=assets/[name].[ext]' 
     }, 
     { 
      test: /\.scss$/, 
      use: [ 
       { loader: "style-loader" }, 
       { loader: "css-loader" }, 
       { loader: "sass-loader" } 
      ] 
     } 
    ]}

既然我没有在设计和architecturing的应用非常好，任何帮助，将不胜感激。

来源

2017-06-23 Karan Hudia

你有几种选择。我们使用bootstrap和sass。你需要在你的项目中包含sass bootstrap软件包。 ref：https：//github.com/AngularClass/angular-starter/wiki/How-to-use-Bootstrap-3-and-Sass-and-ngx-bootstrap –

你知道有没有包括bootstrap的任何方式或一些其他的造型库？我的项目需要我用尽可能少的空间为角色构件库构建我自己的CSS框架。 –

你可以参考这篇文章：https://stackoverflow.com/questions/42433995/using-sass-in-angular-2 –

有人开发了种子角度应用与考虑SASS和完美的体系结构和一切可能需要的。

开心探索它。这工作奇迹为我。

Angular Library Seed

来源

2017-11-28 06:49:34

如果你想要一些常用的样式代码，并且你已经使用了Webpack，那么你可以简单地将常用样式导入到你的主模块中。例如：

目录结构

/src 
    /app 
    app.component.html 
    app.component.ts 
    app.component.scss 
    /styles 
    _mixins.scss 
    _variables.scss 
    common.scss 
    app.module.ts 
    main.ts

在你app.module.ts文件，你可以import './styles/common.scss'，这将基本上把所有的混入和这样导入它。你的app.component.scss文件可能要导入“../styles/variables” ，也许还有一些mixin。

通用样式表的另一种选择是只要将零件需要时导入零件* .scss文件而不是，即可立即导入零件。这可能会阻止您导入您并不真正需要的零件。

来源

2017-06-23 07:49:19 Mitch

我照你的要求做了。我已经使用'styleUrls：[]''将''com.ponent.scss''中的'variables.scss'和'AppComponent'中的'app.component.scss'文件导入。但仍在其他组件SCSS中，变量没有得到解决。 –

使用SCSS与Angular 2/4的体系结构

回答

相关问题