2

プロジェクトで 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-scsspostcss-strip-inline-comments

4

2 に答える 2

2

あなたの例の実際の問題は、このように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そのため、これらの「モジュールが見つかりません」というエラーが発生していました。

于 2016-10-21T09:51:49.480 に答える
0

解決策/回避策を見つけました。

私がしたことは、自分のディレクトリにcustom-mdl.scssファイルを作成したことでした。css/

@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

構成?modulesからも削除したことに注意してください。ExtractTextPlugin

ExtractTextPlugin.extract('style', 'css!sass')

それ以外の

ExtractTextPlugin.extract('style', 'css?modules!sass')

そうしないと、ファイルのクラス名がcustom-mdl.scss文字化けします。

于 2016-10-19T20:10:45.917 に答える