Angular 2 Special Selectors with SASS

Angular 2 Special Selectors with SASS

Replacing :host with \:host and >>> with /deep/ worked for me.

Prevent adding attribute selectors to SaSS selectors with angular 2

try this:

@Component({
    templateUrl: ...,
    styleUrls: ...,
    encapsulation: ViewEncapsulation.None
})

Here's the official doc.

Styling one element with multiple selectors (sass)

Managed to get it working by typing the second selector out in full:

.custom-select-value {
  &--companies.custom-select-value--companies-disabled::after {
    // Styles 
  }
}

Setup issue with webpack, angular 2, css and sass

So, I found the answer. It appears the angular docs are out of date, as well as webpack docs.

I ended up with this as my working config file...

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [{
          loader: 'awesome-typescript-loader',
          options: { configFileName: helpers.root('src', 'tsconfig.json') }
        },
        'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpg|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "postcss-loader" } ]})
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "sass-loader" } ] })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true }),
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

Then I added require statements to the app.component.ts file for the global css requirements, and then use the styles attribute on nested components for component specific styling.

What is the right way to style an element with multiple selectors in SASS?

Both will work fine in SASS. Traditionally, for readability, it's better to nest the elements, as you've listed in the first example.

---

Related Topics