Mitch Karajohn Mitch Karajohn - 10 months ago 78
Sass (Sass) Question

Load specific component from MDL using webpack

I want to just use the layout component of MDL into my project.

So, in my

file, I am importing this:

@import url('~material-design-lite/src/layout/_layout.scss');

and during the building process I am getting the following error:

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

starts with these lines

@import "../variables";
@import "../mixins";

Any ideas what I may be doing wrong?

Relevant parts of my

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: [
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']

Relevant dependencies :

"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"


I tried to
@import url('~material-design-lite/src/material-design-lite.scss');
, since this is not a partial, after I modified it to only import the layout component.

Now I am getting the following errors:

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

It fails on the comments. I have no idea how to fix this, I tried using the
loaders and
plugin to no avail; the old errors were simply replaced by new errors.

Answer Source

I found a solution/workaround.

What I did was that I created a custom-mdl.scss file in my css/ dir, where I simply do

@import '~material-design-lite/src/layout/_layout.scss';

and modified my entry point to be like

app : [ 'app.js', 'custom-mdl.scss', 'app.css' ]

instead of just

app : [ 'app.js', 'app.css' ]

The above builds fine, with the custom-mdl output preceding the app.css content in the bundle, as intended.

Note that I also removed the ?modules from my ExtractTextPlugin configuration, so

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

instead of

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

Otherwise the classnames of the custom-mdl.scss file come out garbled.