Question

我的情况：

在开发Angular 4应用程序时，我想使用角度材料。由于他们只提供一些主题，我需要创建一个自定义主题。他们的文档解释说，为了覆盖默认主题，你应该创建一个scss文件，这就是我所做的。但是，由于我的项目之前没有使用scss文件，我不得不调整我的webpack配置。我尝试在不同的地方导入scss文件，比如应用程序组件的styleUrls，或只是导入，nothings似乎工作。角度材质保持使用默认主题。

我的Webpack基本文件：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

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

    resolve: {
        extensions: ['.js', '.ts'],
        modules: [
            path.join(__dirname, 'node_modules')
        ]
    },

    resolveLoader: {
        modules: [
            path.join(__dirname, 'node_modules')
        ]
    },

    module: {
        loaders: [{
            test: /\.ts$/,
            loaders: ['ts-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].[hash].[ext]'
        }, {
            test: /\.css$/,
            exclude: path.join(__dirname, 'src', 'modules'),
            loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
        }, {
            test: /\.css$/,
            include: path.join(__dirname, 'src', 'modules'),
            loader: 'raw-loader'
        }, {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader']
        }
      ]
    },

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

        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            path.join(__dirname, 'src')
        ),

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

        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

webpack开发文件：

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var baseConfig = require('./webpack.config.base.js');
var path = require('path');

module.exports = webpackMerge(baseConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: 'http://localhost:8080/',
        filename: 'js/[name].js',
        chunkFilename: 'js/[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('css/[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

webpack生产文件：

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var baseConfig = require('./webpack.config.base.js');
var path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(baseConfig, {
    devtool: 'source-map',

    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/[name].[hash].js',
        chunkFilename: 'js/[id].[hash].chunk.js'
    },

    htmlLoader: {
        minimize: false // workaround for ng2
    },

    plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('css/[name].[hash].css'),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(ENV)
            }
        })
    ]
});

我在其中定义我的cusotm Angular Material主题的scss文件：

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-orange, 300);
$my-app-warn:    mat-palette($mat-red, 600);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

我目前如何尝试在我的组件装饰器中导入scss文件：

@Component({
  selector: 'app-property-detail',
  templateUrl: './property.detail.component.html',
  styleUrls: ['./property.detail.component.css', '../../assets/css/ngMaterialTheme.scss']
})

在发布此问题之前，我已经做了一些研究。

我发现但没有帮助：

非常感谢任何帮助！

修改

我有一个常规的styles.css文件，可以在app模块中导入。我试着在那里导入scss文件：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import './ngMaterialTheme.scss';

然而，我得到一个webpack错误说：

./〜/ CSS-装载机？sourceMap！./ SRC /资产/ CSS / ngMaterialTheme.scss 找不到模块：错误：无法解析＆＃39; @ angular / material / theming＆＃39;在......

我认为这可能有用，因为他们建议：

How to add to import SCSS files in Angular 2

Answer 1

我已经通过替换

解决了我的问题

if (checkedId == R.id.choice1){

   //radio0 is checked save the data

   for(int i = 0; i < group.getChildCount(); i++){
            ((RadioButton)rg1.getChildAt(i)).setEnabled(false);
        }
}else if(/*other conditions here*/){

       for(int i = 0; i < group.getChildCount(); i++){
            ((RadioButton)rg1.getChildAt(i)).setEnabled(false);
        }
 }

使用：

        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader']
        }

我现在在app模块中导入styles.css和scss文件：

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

Angular 4 with Webpack - SCSS文件未加载

1 个答案: