如何将.scss文件作为全局文件导入应用程序.js父文件?

Question

我正在启动一个 Angular 项目，并一直按照以下步骤导入 scss 文件 - 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')], sourceMap: true },

我还看过这里发布的 SO 上的类似问题，它没有解释如何全局导入样式：

如何将 .scss 文件包含在 angular2 中的组件中？ 但与我的应用程序上面链接的示例相比.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文件作为全局文件导入应用程序.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];
}
};

Answer 1

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

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

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

，然后添加相应的加载程序。

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