Question

我正在开始一个Angular项目并且已经按照这些步骤导入scss文件 - https://github.com/AngularClass/angular-starter/wiki/How-to-include-SCSS-in-components

所以看看我的style.scss存在的src / scss
webpack.common.js定义了一个sass loader模块 - sassLoader: { includePaths: [path.resolve(__dirname, '..', 'src/scss')], sourceMap: true },

我也在这里发布了一个类似的问题，这个问题没有解释如何在全球范围内导入这种风格：

How do you include .scss file to a component in angular2? 但与上面链接的示例相比，我的app.js文件配置如下：

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import Components from './components/components';
import { HomeComponent } from './home/home.component';
import {
  CheapFlightService,
  AirportsService
} from './services';



angular.module('myApp', [
  uiRouter,
  Components
])
.component('homePage', HomeComponent)
.service('AiportsService', AirportsService)
.service('CheapFlightService', CheapFlightService)
.config(($stateProvider) => {
  'ngInject';
  $stateProvider
    .state('home', {
      url: '',
      template: '<home-page></home-page>'
    });
});

问题：

如何将.scss文件作为全局文件导入app.js父文件？

style.scss文件：

//----------------------------------*\
// SCSS MIXINS
//----------------------------------*/

@import 'mixins/_position.scss';
@import 'mixins/_selection.scss';
@import 'mixins/_vendor.scss';
@import 'mixins/_other-mixins.scss';

//----------------------------------*\
// CONFIG MODULES
//----------------------------------*/

// Config modules
@import 'modules/_vars.scss';
@import 'modules/_clearfix.scss';
@import 'modules/_defaults.scss';

//----------------------------------*\
// PARTIALS
//----------------------------------*/

@import 'partials/_header.scss';
@import 'partials/_nav.scss';
@import 'partials/_sidebar.scss';
@import 'partials/_main.scss';
@import 'partials/_footer.scss';

//----------------------------------*\
// OBJECTS & MODULES
//----------------------------------*/

@import 'modules/_buttons.scss';
@import 'modules/_inputs.scss';
@import 'modules/_lists.scss';
@import 'modules/_typography.scss';
@import 'modules/_misc.scss';
@import 'modules/_app.scss';

// Enhancement modules
@import 'modules/_breakpoints.scss';
@import 'modules/_print.scss';

webpack.common.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CommonsChunkPlugin = require('webpack-vendor-chunk-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.join(__dirname, '..', 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: 'body'
    }),
  ],
  module: {
    loaders: [
      { test: /\.js$/, loaders: ['ng-annotate','babel-loader'], exclude: /node_modules/ },
      { test: /\.html$/, loader: 'raw' },
      // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
      // helps to load bootstrap's css.
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&minetype=application/font-woff' },
      { test: /\.woff2$/,
        loader: 'url?limit=10000&minetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&minetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&minetype=image/svg+xml' }
    ]
  },
  devtool: 'source-map',
  resolve: {
    // add alias for application code directory
    // alias: {
    //   '~': path.resolve(__dirname, '..', 'src')
    // },
  },

  sassLoader: {
    includePaths: [path.resolve(__dirname, '..', 'src/scss')],
    sourceMap: true
  },

  postcss: function() {
    return [autoprefixer];
  }
};

如何将.scss文件作为全局导入app.js父文件？

0 个答案: