使用 webpack 从 MDL 加载特定组件

Posted 2023-02-22

【中文标题】使用 webpack 从 MDL 加载特定组件

【英文标题】：Load specific component from MDL using webpack

【发布时间】：2017-02-26 23:29:14

【问题描述】：

我只想在我的项目中使用 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

在 cmets 上失败。我不知道如何解决这个问题，我尝试使用 postcss 和 postcss-scss 加载器和 postcss-strip-inline-comments 插件无济于事；旧的错误只是被新的错误所取代。

【问题讨论】：

这是否与我要加载的文件是部分文件有关？根据文档：“partial 只是一个以下划线开头的 Sass 文件。您可以将其命名为 _partial.scss。下划线让 Sass 知道该文件只是一个部分文件并且不应将其生成到 CSS 文件中。"

【参考方案1】：

您的示例中的实际问题是您正在像这样导入 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。这就是您收到这些“未找到模块”错误的原因。

【讨论】：

首先：我怎么没想到这一点，当我的“解决方案”做到这一点时，还有更多。大脑有时是如何工作的……谢谢。然而，我注意到了一些事情。考虑到我的app.css 文件中的内容顺序是这样的：SASS 导入、CSS 导入、CSS 的其余部分，当我构建文件时，我的app.bundle.css 的内容是这样的：CSS 导入、SASS 导入、其余的 CSS。有没有办法让它尊重我导入文件的顺序？因为对于 CSS，在大多数情况下，排序很重要。

很抱歉打扰您，但您能否告诉我，当我按照您提出的解决方案时，是否有办法解决我所面临的问题？我们的解决方案比我的好，我想实施它，除了那一件事

解析导入的顺序应该与遇到导入的顺序相同。如果不是这种情况，则您的设置中可能存在另一个问题。你能给我一个小的示例存储库来演示它吗？

给你：github.com/mkarajohn/load_order_example。查看app.scss 中的第一条评论内容。当我构建它时，main.bundle.css 中的第一条评论以 This marks the beginning of other.css rules

开头

嗨，Johannes，您有机会查看我为您创建的存储库吗？谢谢。

【参考方案2】：

我找到了解决方案/解决方法。

我所做的是在我的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 文件的类名会出现乱码。