使用 webpack 从 MDL 加载特定组件
Load specific component from MDL using webpack
我只想在我的项目中使用 MDL 的布局组件。
所以，在我的 app.css 文件中，我正在导入这个：
@import url('~material-design-lite/src/layout/_layout.scss');
并且在构建过程中出现以下错误：
ERROR in ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../variables in /Users/Mitch/Documents/project/web/node_modules/material-design-lite/src/layout
@ ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss 3:10-66
ERROR in ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../mixins in /Users/Mitch/Documents/project/web/node_modules/material-design-lite/src/layout
@ ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss 4:10-63
_layout.sccs 从这些行开始
@import "../variables";
@import "../mixins";
知道我做错了什么吗？
我的相关部分 webpack.config.js :
const PATHS = {
node_modules: path.resolve(__dirname, 'node_modules'),
build: path.join(__dirname, 'public', 'build'),
js: path.resolve(__dirname, 'public', 'js'),
css: path.resolve(__dirname, 'public', 'css'),
};
...
resolve: {
root: [
path.resolve(__dirname),
PATHS.node_modules,
PATHS.js,
PATHS.css
],
...
extensions: ['', '.js', '.jsx', '.json', '.css', '.scss']
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!sass')
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.gif$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
...
相关依赖：
...
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"css-loader": "^0.25.0",
"eslint": "^3.6.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^3.10.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-validator": "^2.2.7"
}
...
更新
我尝试@import url('~material-design-lite/src/material-design-lite.scss');，因为这不是局部的，在我修改它以仅导入布局组件之后。
现在我收到以下错误：
ERROR in ./~/css-loader!./~/material-design-lite/src/material-design-lite.scss
Module build failed: Unknown word (19:1)
17 | /* Material Design Lite */
18 |
> 19 | // Variables and mixins
| ^
20 | @import "variables";
21 | @import "mixins";
22 |
@ ./~/css-loader!./public/css/app.css 3:10-114
评论失败。我不知道如何解决这个问题，我尝试使用 postcss 和 postcss-scss 加载程序以及 postcss-strip-inline-comments 插件无济于事；旧错误只是被新错误所取代。
我找到了 solution/workaround.
我所做的是在我的 css/ 目录中创建了一个 custom-mdl.scss 文件，我只是在其中执行
@import '~material-design-lite/src/layout/_layout.scss';
并将我的入口点修改为
app : [ 'app.js', 'custom-mdl.scss', 'app.css' ]
而不仅仅是
app : [ 'app.js', 'app.css' ]
上面的构建很好，custom-mdl 输出在包中的 app.css 内容之前，正如预期的那样。
请注意，我还从 ExtractTextPlugin 配置中删除了 ?modules，因此
ExtractTextPlugin.extract('style', 'css!sass')
而不是
ExtractTextPlugin.extract('style', 'css?modules!sass')
否则 custom-mdl.scss 文件的类名会出现乱码。
您的示例中的实际问题是您像这样导入 MDL
@import url('~material-design-lite/src/layout/_layout.scss');
而不是
@import '~material-design-lite/src/layout/_layout.scss';
第一个被 sass-loader 忽略（因为 SASS 没有 url() 导入）并且将被 css-loader 处理.但是，css-loader 不会自动将 .scss 扩展为 variables，例如。这就是您收到这些 "Module not found" 错误的原因。
我只想在我的项目中使用 MDL 的布局组件。
所以，在我的 app.css 文件中，我正在导入这个：
@import url('~material-design-lite/src/layout/_layout.scss');
并且在构建过程中出现以下错误：
ERROR in ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../variables in /Users/Mitch/Documents/project/web/node_modules/material-design-lite/src/layout
@ ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss 3:10-66
ERROR in ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../mixins in /Users/Mitch/Documents/project/web/node_modules/material-design-lite/src/layout
@ ./~/css-loader!./~/material-design-lite/src/layout/_layout.scss 4:10-63
_layout.sccs 从这些行开始
@import "../variables";
@import "../mixins";
知道我做错了什么吗？
我的相关部分 webpack.config.js :
const PATHS = {
node_modules: path.resolve(__dirname, 'node_modules'),
build: path.join(__dirname, 'public', 'build'),
js: path.resolve(__dirname, 'public', 'js'),
css: path.resolve(__dirname, 'public', 'css'),
};
...
resolve: {
root: [
path.resolve(__dirname),
PATHS.node_modules,
PATHS.js,
PATHS.css
],
...
extensions: ['', '.js', '.jsx', '.json', '.css', '.scss']
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!sass')
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.gif$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
...
相关依赖：
...
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"css-loader": "^0.25.0",
"eslint": "^3.6.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^3.10.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-validator": "^2.2.7"
}
...
更新
我尝试@import url('~material-design-lite/src/material-design-lite.scss');，因为这不是局部的，在我修改它以仅导入布局组件之后。
现在我收到以下错误：
ERROR in ./~/css-loader!./~/material-design-lite/src/material-design-lite.scss
Module build failed: Unknown word (19:1)
17 | /* Material Design Lite */
18 |
> 19 | // Variables and mixins
| ^
20 | @import "variables";
21 | @import "mixins";
22 |
@ ./~/css-loader!./public/css/app.css 3:10-114
评论失败。我不知道如何解决这个问题，我尝试使用 postcss 和 postcss-scss 加载程序以及 postcss-strip-inline-comments 插件无济于事；旧错误只是被新错误所取代。
我找到了 solution/workaround.
我所做的是在我的 css/ 目录中创建了一个 custom-mdl.scss 文件，我只是在其中执行
@import '~material-design-lite/src/layout/_layout.scss';
并将我的入口点修改为
app : [ 'app.js', 'custom-mdl.scss', 'app.css' ]
而不仅仅是
app : [ 'app.js', 'app.css' ]
上面的构建很好，custom-mdl 输出在包中的 app.css 内容之前，正如预期的那样。
请注意，我还从 ExtractTextPlugin 配置中删除了 ?modules，因此
ExtractTextPlugin.extract('style', 'css!sass')
而不是
ExtractTextPlugin.extract('style', 'css?modules!sass')
否则 custom-mdl.scss 文件的类名会出现乱码。
您的示例中的实际问题是您像这样导入 MDL
@import url('~material-design-lite/src/layout/_layout.scss');
而不是
@import '~material-design-lite/src/layout/_layout.scss';
第一个被 sass-loader 忽略（因为 SASS 没有 url() 导入）并且将被 css-loader 处理.但是，css-loader 不会自动将 .scss 扩展为 variables，例如。这就是您收到这些 "Module not found" 错误的原因。