我目前正在学习 webpack 和 MEAN 堆栈。我需要将我的 scss 文件加载到我的项目中，并且我在 webpack.common.js 文件中使用了 extract-text-webpack-plugin 和 css-loader 和 sass-loader。它成功地将 scss 文件转换为 css 并将其加载到我的项目所在的文件夹“/dist/”。但是，我在运行 webpack 时遇到错误:
ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/extract-text-webpack-plugin/loader.js?{"id":1,"omit":1,"remove":true}!./~/style-loader!./~/css-loader!./~/
sass-loader/lib/loader.js!./src/app/app.component.scss
Module build failed:
// html, body{
^
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
in C:\Users\Andres\Source\Repos\mean\mean\src\app\app.component.scss (line 1, column 1)
@ ./src/app/app.component.scss 2:21-330
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.browser.ts
这是 webpack.common.js 文件，我正在使用(它几乎包含由 mean.io 提供的 webpack.common.js 文件，我做了一些小的更改来启动你的平均应用程序):
const webpack = require('webpack');
const helpers = require('./helpers');
const AssetsPlugin = require('assets-webpack-plugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ngcWebpack = require('ngc-webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//const PreloadWebpackPlugin = require('preload-webpack-plugin');
/**
* Webpack Constants
*/
const HMR = helpers.hasProcessFlag('hot');
const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot');
const METADATA = {
title: 'TEST',
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer(),
HMR: HMR
};
var extractTextPlugin = new ExtractTextPlugin({
filename: './assets/css/site.css'
});
/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = function (options) {
isProd = options.env === 'production';
return {
/**
* Cache generated modules and chunks to improve performance for multiple incremental builds.
* This is enabled by default in watch mode.
* You can pass false to disable it.
*
* See: http://webpack.github.io/docs/configuration.html#cache
*/
//cache: false,
/**
* The entry point for the bundle
* Our Angular.js app
*
* See: http://webpack.github.io/docs/configuration.html#entry
*/
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' :
'./src/main.browser.ts',
'app': './src/assets/scripts/app.js'
},
/**
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
/**
* An array of extensions that should be used to resolve modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
*/
extensions: ['.ts', '.js', '.json'],
/**
* An array of directory names to be resolved to the current directory
*/
modules: [helpers.root('src'), helpers.root('node_modules')],
},
/**
* Options affecting the normal modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
loaders: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}],
rules: [
/**
* Typescript loader support for .ts
*
* Component Template/Style integration using `angular2-template-loader`
* Angular 2 lazy loading (async routes) via `ng-router-loader`
*
* `ng-router-loader` expects vanilla JavaScript code, not TypeScript code. This is why the
* order of the loader matter.
*
* See: https://github.com/s-panferov/awesome-typescript-loader
* See: https://github.com/TheLarkInn/angular2-template-loader
* See: https://github.com/shlomiassaf/ng-router-loader
*/
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.ts$/,
use: [
{
loader: '@angularclass/hmr-loader',
options: {
pretty: !isProd,
prod: isProd
}
},
{
/**
* MAKE SURE TO CHAIN VANILLA JS CODE, I.E. TS COMPILATION OUTPUT.
*/
loader: 'ng-router-loader',
options: {
loader: 'async-import',
genDir: 'compiled',
aot: AOT
}
},
{
loader: 'awesome-typescript-loader',
options: {
configFileName: 'tsconfig.webpack.json',
useCache: !isProd,
}
},
{
loader: 'angular2-template-loader'
}
],
exclude: [/\.(spec|e2e)\.ts$/]
},
/**
* Json loader support for *.json files.
*
* See: https://github.com/webpack/json-loader
*/
{
test: /\.json$/,
use: 'json-loader'
},
/**
* To string and css loader support for *.css files (from Angular components)
* Returns file content as string
*
*/
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src', 'styles')]
},
/**
* To string and sass loader support for *.scss files (from Angular components)
* Returns compiled css content as string
*
*/
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: [helpers.root('src', 'styles')]
},
/**
* Raw loader support for *.html
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.html$/,
use: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
/**
* File loader for supporting images, for example, in CSS files.
*/
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
/* File loader for supporting fonts, for example, in CSS files.
*/
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader'
},
{
test: /\.scss$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
loader: ["css-loader", "sass-loader"],
})
},
],
},
/**
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: [
// Use for DLLs
// new AssetsPlugin({
// path: helpers.root('dist'),
// filename: 'webpack-assets.json',
// prettyPrint: true
// }),
/**
* Plugin: ForkCheckerPlugin
* Description: Do type checking in a separate process, so webpack don't need to wait.
*
* See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
*/
new CheckerPlugin(),
/**
* Plugin: CommonsChunkPlugin
* Description: Shares common code between the pages.
* It identifies common modules and put them into a commons chunk.
*
* See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
* See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
*/
new CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
/**
* This enables tree shaking of the vendor modules
*/
// new CommonsChunkPlugin({
// name: 'vendor',
// chunks: ['main'],
// minChunks: module => /node_modules/.test(module.resource)
// }),
/**
* Specify the correct order the scripts will be injected in
*/
// new CommonsChunkPlugin({
// name: ['polyfills', 'vendor'].reverse()
// }),
// new CommonsChunkPlugin({
// name: ['manifest'],
// minChunks: Infinity,
// }),
/**
* Plugin: ContextReplacementPlugin
* Description: Provides context to Angular's use of System.import
*
* See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
* See: https://github.com/angular/angular/issues/11580
*/
new ContextReplacementPlugin(
/**
* The (\\|\/) piece accounts for path separators in *nix and Windows
*/
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('src'), // location of your src
{
/**
* Your Angular Async Route paths relative to this root directory
*/
}
),
/**
* Plugin: CopyWebpackPlugin
* Description: Copy files and directories in webpack.
*
* Copies project static assets.
*
* See: https://www.npmjs.com/package/copy-webpack-plugin
*/
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets' },
{ from: 'src/meta' }
],
{ ignore: ['*.scss'] },
isProd ? { ignore: ['mock-data/**/*'] } : undefined
),
/*
* Plugin: PreloadWebpackPlugin
* Description: Preload is a web standard aimed at improving
* performance and granular loading of resources.
*
* See: https://github.com/GoogleChrome/preload-webpack-plugin
*/
//new PreloadWebpackPlugin({
// rel: 'preload',
// as: 'script',
// include: ['polyfills', 'vendor', 'main'].reverse(),
// fileBlacklist: ['.css', '.map']
//}),
//new PreloadWebpackPlugin({
// rel: 'prefetch',
// as: 'script',
// include: 'asyncChunks'
//}),
/**
* Plugin: ScriptExtHtmlWebpackPlugin
* Description: Enhances html-webpack-plugin functionality
* with different deployment options for your scripts including:
*
* See: https://github.com/numical/script-ext-html-webpack-plugin
*/
new ScriptExtHtmlWebpackPlugin({
sync: /polyfill|vendor/,
defaultAttribute: 'async',
preload: [/polyfill|vendor|main/],
prefetch: [/chunk/]
}),
/*
* Plugin: HtmlWebpackPlugin
* Description: Simplifies creation of HTML files to serve your webpack bundles.
* This is especially useful for webpack bundles that include a hash in the filename
* which changes every compilation.
*
* See: https://github.com/ampedandwired/html-webpack-plugin
*/
new HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'body'
}),
/**
* Plugin: HtmlElementsPlugin
* Description: Generate html tags based on javascript maps.
*
* If a publicPath is set in the webpack output configuration, it will be automatically added to
* href attributes, you can disable that by adding a "=href": false property.
* You can also enable it to other attribute by settings "=attName": true.
*
* The configuration supplied is map between a location (key) and an element definition object (value)
* The location (key) is then exported to the template under then htmlElements property in webpack configuration.
*
* Example:
* Adding this plugin configuration
* new HtmlElementsPlugin({
* headTags: { ... }
* })
*
* Means we can use it in the template like this:
* <%= webpackConfig.htmlElements.headTags %>
*
* Dependencies: HtmlWebpackPlugin
*/
new HtmlElementsPlugin({
headTags: require('./head-config.common')
}),
extractTextPlugin,
/**
* Plugin LoaderOptionsPlugin (experimental)
*
* See: https://gist.github.com/sokra/27b24881210b56bbaff7
*/
new LoaderOptionsPlugin({}),
new ngcWebpack.NgcWebpackPlugin({
/**
* If false the plugin is a ghost, it will not perform any action.
* This property can be used to trigger AOT on/off depending on your build target (prod, staging etc...)
*
* The state can not change after initializing the plugin.
* @default true
*/
disabled: !AOT,
tsConfig: helpers.root('tsconfig.webpack.json'),
/**
* A path to a file (resource) that will replace all resource referenced in @Components.
* For each `@Component` the AOT compiler compiles it creates new representation for the templates (html, styles)
* of that `@Components`. It means that there is no need for the source templates, they take a lot of
* space and they will be replaced by the content of this resource.
*
* To leave the template as is set to a falsy value (the default).
*
* TIP: Use an empty file as an overriding resource. It is recommended to use a ".js" file which
* usually has small amount of loaders hence less performance impact.
*
* > This feature is doing NormalModuleReplacementPlugin for AOT compiled resources.
*
* ### resourceOverride and assets
* If you reference assets in your styles/html that are not inlined and you expect a loader (e.g. url-loader)
* to copy them, don't use the `resourceOverride` feature as it does not support this feature at the moment.
* With `resourceOverride` the end result is that webpack will replace the asset with an href to the public
* assets folder but it will not copy the files. This happens because the replacement is done in the AOT compilation
* phase but in the bundling it won't happen (it's being replaced with and empty file...)
*
* @default undefined
*/
resourceOverride: helpers.root('config/resource-override.js')
}),
/**
* Plugin: InlineManifestWebpackPlugin
* Inline Webpack's manifest.js in index.html
*
* https://github.com/szrenwei/inline-manifest-webpack-plugin
*/
new InlineManifestWebpackPlugin(),
],
/**
* Include polyfills or mocks for various node stuff
* Description: Node configuration
*
* See: https://webpack.github.io/docs/configuration.html#node
*/
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
};
}
我一直试图解决这个问题一段时间，但似乎我无法找到解决方案。
有没有人遇到过同样的问题？
更新
我的 app.component.scss 文件全部注释掉了:
// html, body{
// height: 100%;
// font-family: Arial, Helvetica, sans-serif
// header{
// background-color: primary
// }
// .example-fill-remaining-space {
// // This fills the remaining space, by using flexbox.
// // Every toolbar row uses a flexbox row layout.
// flex: 2 2 auto;
// }
// header{
// width:100%;
// .logotTxt{
// color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
// padding: 15px;
// }
// .links
// {
// color: white; font-family: 'Helvetica Neue', sans-serif; font-size: 15px; font-weight:initial; letter-spacing: -1px; line-height: 1; text-align: center;
// padding: 15px;
// }
// }
// }
事实上，我什至不需要使用 app.component.scss 因为我计划将所有样式表放在一个文件中，而不是每个组件一个。
最佳答案
在您的 web.config.js 中删除 scss 和 sass 的测试规则并添加
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
关于webpack 编译 sass 错误 : Invalid CSS after "...load the styles": expected 1 selector or at-rule, 是 "var content = requi"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47895166/