使用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的體系結構

回答

相關問題