Question

我正在使用Angular2 Universal启动器来设置我的项目。我尝试设置scss文件，但在使用Extract Text Plugin时遇到了问题：

的package.json

"webpack": "2.2.1",
"extract-text-webpack-plugin": "^2.0.0-rc.2"

Webpack设置：

....
module: {
rules: [
  // TypeScript
  { test: /\.ts$/,   use: ['awesome-typescript-loader', 'angular2-template-loader'] },
  { test: /\.html$/, use: 'raw-loader' },
  { test: /\.css$/, use: 'raw-loader' },
  { test: /\.scss$/, use: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader:'raw-loader!sass-loader'})},
  { test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: "file?name=fonts/[name].[ext]"},
  { test: /\.json$/, use: 'json-loader' }
],
 },

plugins: [
  //Use commonPlugins.
  new ExtractTextPlugin({
    filename: '[name].css',
    allChunks: true,
    disable: false
  })
 ]....

当我构建项目时，我收到此错误：

TypeError: cssText.replace is not a function

在我的App Componet中，我使用＆＃34; angular2-template-loader＆＃34;加载scss文件：

...
@Component({
    changeDetection: ChangeDetectionStrategy.Default,
    encapsulation: ViewEncapsulation.Emulated,
    selector: 'app',
    styles: [require('../assets/styles/main.scss')],

在我的dist文件夹中，main.scss被编译为main.css：

/**
 * SCSS entry point
 * IMPORTANT: Do not add any styles here instead import your scss files
 */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT     (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside ...

如果有人能指出我正确的方向，那将非常感激。谢谢。

************更新*********************

我发现了

 require('../assets/styles/main.scss')

使用Extract Text Plugin不会按预期返回String。然后我将require输出转换为字符串：

require('../assets/styles/main.scss').toString()

按预期工作，但当我检查标题时，我看到了：

<link rel="stylesheet" href="/main.css"> ---> My generate scss file
<style>[object Object]</style>   ---> seems like this is coming from the app component styles property???

Answer 1

{test：/.scss$/i,use：['to-string-loader'，... extractCSS.extract（{ loader：['css-loader'，'sass-loader']}）]}

这将从组件中提取所有css到外部css文件。这将打破角度视图包装，因为角度无法修改css。我还在试图弄清楚如何让它与封装一起工作。我不确定在女巫阶段角度改变css来添加属性。

也代替： styles：[require（'../ assets / styles / main.scss'）]，你可以说： styleUrls：['../ assets / styles / main.scss']

Angular2 / Webpack 2 / Sass设置：TypeError：cssText.replace不是函数

1 个答案: