我尝试将 mattrial.io 与 webpack 一起使用,正如material.io 的入门中所述,使用以下配置:
webpack.config.js --> 完全一样的例子
const autoprefixer = require('autoprefixer');
module.exports = {
entry: ['./app.scss'],
mode: 'development',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
},
{
loader: 'sass-loader',
options: {
sassOptions: {
implementation: require('sass'),
includePaths: ['./node_modules'],
},
},
}
],
},
],
},
};
app.scss --> 与示例完全一样
@use "~@material/ripple";
.test {
@include ripple.surface;
@include ripple.radius-bounded;
@include ripple.states;
}
包.json
{
"private": true,
"scripts": {
"build": "webpack --config=webpack.config.js"
},
"devDependencies": {
"autoprefixer": "^9.7.4",
"css-loader": "^3.4.2",
"extract-loader": "^5.0.1",
"file-loader": "^6.0.0",
"postcss-loader": "^3.0.0",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"material-components-web": "^4.0.0"
}
}
但是,当我运行时,出现npm run build
以下错误:
ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
@use "~@material/ripple";
^
Can't find stylesheet to import.
╷
1 │ @use "~@material/ripple";
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
stdin 1:1 root stylesheet
in /path-to-file/app.scss (line 1, column 1)
@ multi ./app.scss main[0]
我也试过 gulp 但我得到了同样的错误。
知道如何使它工作吗?
我还为此创建了一个仓库。您可以克隆: https ://github.com/nazari-dev/material.io