如何将 .scss 文件作为全局导入 app.js 父文件? [英] How to import .scss file to app.js parent file as a global?

问题描述

我正在启动一个 Angular 项目，并一直按照以下步骤导入 scss 文件 - https://github.com/AngularClass/angular-starter/wiki/How-to-include-SCSS-in-components

I'm starting an Angular project and have been following these steps to import the scss files - https://github.com/AngularClass/angular-starter/wiki/How-to-include-SCSS-in-components

• 所以查看 src/scss 我的 style.scss 存在
• webpack.common.js 定义了一个 sass 加载器模块 - sassLoader: {includePaths: [path.resolve(__dirname, '..', 'src/scss')],源地图:真实},

• So looking at src/scss my style.scss is present
• webpack.common.js has a sass loader module defined - sassLoader: { includePaths: [path.resolve(__dirname, '..', 'src/scss')], sourceMap: true },

我也在此处查看了关于 SO 的类似问题，该问题并未解释如何全局导入样式:

I've also looked at a similar question on SO posted here which doesn't explain how to import the style globally:

如何包含 .scss 文件到 angular2 中的组件?但与上面链接的示例相比，我的 app.js 文件配置如下:

How do you include .scss file to a component in angular2? But in comparison with the example linked above my app.js file is configured like so:

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 父文件?

How can you import .scss file to app.js parent file as a global?

style.scss 文件:

style.scss file:

//----------------------------------*\
// 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:

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];
  }
};

推荐答案

首先，sassLoader 和 postcss 不是有效的 webpack 配置属性 https://webpack.js.org/configuration

Firstly, sassLoader and postcss are not valid webpack config attributes https://webpack.js.org/configuration

您通常采用的方法是将 .scss 文件添加到您的条目中

The way you would typically go about it is to add the .scss file to your entry

  entry: {
    app: './src/app.js',
    styles: './pathtoyourstyles/style.scss'
  },

然后添加适当的加载器.

and then add the appropriate loaders.

loaders: [
  {
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
  }
]

这篇关于如何将 .scss 文件作为全局导入 app.js 父文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！