我知道这个问题已经有很多例子了,但是没有一个解决了我在使用Webpack和Sass时遇到的问题。
背景:我正在使用npm安装material-design-lite,并在我的AddReminderView.ts
文件中像这样引用它:
require('material-design-lite/dist/material.css');
require('material-design-lite/dist/material.js');
require('../scss/styles.scss');
这是我的 webpack 配置,非常简单。
const path = require('path');
module.exports = {
mode: 'development',
entry: {
add_trial: ['./src/views/AddReminderView.ts',
]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist/js')
}
};
我接收到的错误如下:
ERROR in ./node_modules/material-design-lite/dist/material.css 8:0
Module parse failed: Unexpected character '@' (8:0)
You may need an appropriate loader to handle this file type.
| * @link https://github.com/google/material-design-lite
| */
> @charset "UTF-8";
| /**
| * Copyright 2015 Google Inc. All Rights Reserved.
@ ./src/views/AddReminderView.ts 3:0-49
@ multi ./src/views/AddReminderView.ts
我该如何修复我的Webpack配置,以便可以正确地包含.css文件?
编辑:
这是我的npm依赖项:
"devDependencies": {
"@types/node": "^10.5.2",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.9.2",
"sass": "^1.9.1",
"sass-loader": "^7.0.3",
"strip-loader": "^0.1.2",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typescript": "^2.9.2",
"typings-for-css-modules-loader": "^1.7.0",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"guid-typescript": "^1.0.7",
"material-design-lite": "^1.3.0"
}
package.json
中安装了node-sass
吗? - zenoh"node-sass": "^4.9.2",
。 - uioporqwerty{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
。 - twigmac